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

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

 <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 4

要在水平和垂直方向上对齐任何内容（包括文本），只需在包含该内容的容器中使用以下内容

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

}

Answer 5

RN版本> = 0.55.2现在支持“ textAlignVertical”。

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

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

使用两种情况flex: 1并设置height组件的<Text>。

Answer 6

文本垂直居中对齐摘要

情况1：“视图”下只有一个文本 iOS：将flex与alignItems / justifyContent结合使用可使其居中， Adr：height = lineHeight，includeFontPadding：错误，居中

情况2：在线条视图中有两个文本，并且两个文本字体不同，并且较小字体的文本不需要使用高度。

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

情况3：在线条视图中有两个文本，并且两个文本字体不同，并且字体大小较小的文本必须使用高度。

使用上述方法对齐具有较大字体大小的字体，而较小字体大小则使用带有padding的高度和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>

Answer 7

flex: 1 使子视图占用父视图中的所有剩余空间。所以请记住确保父级占用了它应该占用的空间。

我建议将您的内容包装在 <SafeAreaView> 标签中，以便根据它所在的设备调整内容。但您可以使用任何其他视图类型。

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

flex: 1 使视图占据视图的整个宽度和高度
justifyContent: 'center' 垂直居中子项
alignItems: 'center' 将孩子水平居中

您还可以在 Text 元素上使用 textAlign: center 并删除 alignItems: 'center'。这当然只会使 Text 对象中的文本居中，如果您有多个需要居中的元素，则不起作用。

Answer 8

这是解决这个问题的方法。 ScrollView将占据剩余的垂直空间，将文本向下推到底部。

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

或..

<View>
  <View style={{ flex: 1 }}>{}</View>
  <Text>Your text</Text>
</View>

Answer 9

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

我创建了一个初始视图，并将想要的元素嵌套在该视图中垂直居中的位置。我犯了一个错误，即在初始视图中包含“ flex：1”，这会弄乱垂直对齐方式。

代码：

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

Answer 10

您可以使用 flexbox 和 justifyContent: 'flex-end' 来实现垂直居中。

这是点心：https://snack.expo.io/@rynek/vertical-centering-with-flexbox-in-react-native

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

10 个答案: