Text 反应本机中的文本垂直对齐（使用nativebase）

我想知道有没有一种方法可以在React Native中垂直对齐。我试图在底部定位，但我认为我找不到一个好方法

---

如果有人知道如何解决这个问题，请告诉我。

您可以使用

flex

属性

justifyContent

来实现这一点。完整的文件

垂直居中文本

您可以使用仅限android的样式属性textAlignVertical

要对齐顶部的文本，请执行以下操作：

style={{textAlignVertical: 'top'}}

要使文本居中对齐，请执行以下操作：

style={{textAlignVertical: 'center'}}

要对齐底部的文本，请执行以下操作：

style={{textAlignVertical: 'bottom'}}

---

当您使用图像或图标时，尤其会出现此问题。我在解决方案中遇到了同样的问题：

 <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
   <Icon type="MaterialCommunityIcons" name="barcode" />
   <Text style={{ textAlign: 'center' }}>{urun_data.barkod}</Text>
</View>

{urun_data.barkod}

要水平和垂直对齐任何内容（包括文本），只需在容纳内容的容器中使用以下命令

容器：{
justifyContent:'居中'，//垂直居中
alignItems:'居中'，//水平居中
弹性：1
}

文本垂直中心对齐摘要

案例1：视图中只有一个文本 Ios：将flex与alignItems/justifyContent一起使用，使其更加集中， Adr:height=线宽，包括填充：false更居中

案例2：线视图中有两个文本，两种文本字体不同，字体较小的文本不需要使用高度

使用上述方法对齐较大的一个。较小的一个只能用于字体大小，但不能用于行高和高度属性。在这种情况下，两个文本都可以居中

案例3：线视图中有两个文本，两种文本字体不同，字体较小的文本必须使用高度

使用上述方法对齐较大字体大小的字体，较小字体大小使用带填充的高度和includeFontPadding来实现对齐

和演示

<View
    style={{
        flexDirection: 'row',
        height: 38,
        borderWidth: 1,
        borderColor: '#000',
        alignItems: 'center'
    }}
>
    <Text
        style={{
            fontSize: 24
        }}
    >
        测试
    </Text>
    <Text
        style={{
            fontSize: 24,
            lineHeight: 36,
            height: 36,
            includeFontPadding: false
        }}
    >
        测试
    </Text>
</View>
<View
    style={{
        flexDirection: 'row',
        height: 38,
        borderWidth: 1,
        borderColor: '#000',
        alignItems: 'center'
    }}
>
    <Text
        style={{
            fontSize: 24
        }}
    >
        ios设备
    </Text>
    <Text
        style={{
            fontSize: 16
        }}
    >
        更对齐
    </Text>
</View>
<View
    style={{
        flexDirection: 'row',
        height: 38,
        borderWidth: 1,
        borderColor: '#000',
        alignItems: 'center'
    }}
>
    <Text
        style={{
            fontSize: 24,
            lineHeight: 36,
            height: 36,
            includeFontPadding: false
        }}
    >
        安卓
    </Text>
    <Text
        style={{
            fontSize: 12,
            height: 18,
            includeFontPadding: false,
            paddingVertical: 2,
            paddingHorizontal: 1,
            paddingTop: DeviceInfo.isIOS ? 3 : 2,
        }}
    >
        更对齐
    </Text>
</View>

测试
测试
网间网操作系统设备
更对齐
安卓
更对齐

这是一个有点难看的问题解决方案。滚动视图将占据剩余的垂直空间，将文本向下推到底部

<View>
  <ScrollView>{}</ScrollView>
  <Text>Your text</Text>
</View>

{}
你的文字

或者

{}
你的文字

RN version>=0.55.2现在支持“textAlignVertical”

console.log（'text>>>>>>，text）}
value='sample text'
/>
正文：{
textAlign:'中心'，
textAlignVertical:'中心'，
}

---

使用这两种情况

flex:1

和设置

组件的

高度。
我遇到了类似的问题，并查看了这里的许多其他帖子。这是对我有用的东西

我创建了一个初始视图，并将我想要垂直居中的元素嵌套在该视图中。我犯了一个错误，在初始视图中包含了“flex:1”，这破坏了垂直对齐

守则：

<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
  <Text>Content here to be vertically aligned</Text>
  <Switch>...</Switch>
</View>


此处的内容要垂直对齐
...
flex:1

使子视图占用父视图中的所有剩余空间。因此，请记住确保家长占用了它应该占用的空间

我主张将您的内容包装在

标签中，以便根据设备调整内容。但您可以使用任何其他视图类型

 <SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
     <Text>Centered Text</Text>
 </SafeAreaView>

居中文本

• flex:1

  使视图占据其内部视图的全部宽度和高度

• justifyContent:“居中”

  使子对象垂直居中

• alignItems:“居中”

  水平居中子项

---

您还可以在文本元素上使用

textAlign:center

，并删除

alignItems:“center”

。当然，这只会使文本对象中的文本居中，如果有多个元素需要居中，则不起作用。

您可以使用

flexbox

和

justifyContent:“flex end”

来实现垂直居中

---

这里有一个小吃：

textAlignVertical样式是Android独有的属性。如果您是在iOS上开发，请尝试改用flexbox对齐属性

alignItems:center

。另请参阅。我建议您不要使用此选项。使用跨平台的解决方案。注释似乎混淆了，因为对我来说，项目垂直居中，内容水平对齐。默认情况下，React native具有

flexDirection:column

，与web相反。因此，如果内容是垂直的，我认为您不需要

flexDirection:“行”

。默认的弯曲方向已经是行。此外，您可能希望将

flex:1

添加到视图中，以使其覆盖整个视图高度。

<TextInput
    style={styles.text}
    onChangeText={text => console.log('text >>>>>>>', text)}
    value='sample text'
 />

text: {
  textAlign: 'center',
  textAlignVertical: 'center',
}

<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
  <Text>Content here to be vertically aligned</Text>
  <Switch>...</Switch>
</View>

 <SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
     <Text>Centered Text</Text>
 </SafeAreaView>