文本垂直对齐in react native(使用nativebase)

Question

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

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

谢谢,

Answer 1

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

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

Answer 2

您可以使用该flex属性justifyContent来实现此目的.完整文档在这里.

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

Answer 3

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

要在顶部对齐文字:

style={{textAlignVertical: 'top'}}

要在中心对齐文字:

style={{textAlignVertical: 'center'}}

要对齐底部的文字:

style={{textAlignVertical: 'bottom'}}

Answer 4

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

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

代码：

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

Answer 5

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

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

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