文本垂直对齐in react native（使用nativebase）

Question

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

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

谢谢，

Answer 1

您可以使用flex属性justifyContent来实现此目的。完整文档here。

<View style={{justifyContent: 'center'}}>
   <Text>Vertically Centered Text</Text>
</View>

Answer 2

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

要在顶部对齐文字：

style={{textAlignVertical: 'top'}}

要在中心对齐文字：

style={{textAlignVertical: 'center'}}

要对齐底部的文字：

style={{textAlignVertical: 'bottom'}}

Answer 3

要在水平和垂直方向上对齐包括文本在内的任何内容，只需在容纳它的容器中使用以下内容即可

container :{
   justifyContent: 'center', //Centered vertically
   alignItems: 'center', // Centered horizontally
   flex:1

}

Answer 4

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

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

Answer 5

文本垂直中心对齐摘要

案例1：View Ios下只有一个Text：使用flex，alignItems / justifyContent更加居中，Adr：height = lineHeight，includeFontPadding：false更集中

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

使用上述方法对齐较大的一个。较小的一个只能与font-size一起使用，但不能与line-height和height属性一起使用。在这种情况下，两个文本都可以居中。

案例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>