React Native Text组件不会在View组件中居中

Question

嗨，我认为这应该很简单，但我无法让它发挥作用。似乎无论我做什么，我都无法让文本组件在视图内水平居中。我尝试过使用alignItems：center，justifyContent：center，alignSelf：center，textAlign：center ...没有用。我可以让它垂直居中，但不能水平居中。 Whyyyyy亲爱的领主？

<Animated.View style={[styles.titleContainer]}>
    <Text style={styles.title}>App logo here</Text>
</Animated.View>

如何让文本垂直和水平居中？

这是我的CSS：

titleContainer: {
    flex: 1,
    marginTop:30,
    marginBottom:30,
    justifyContent:'center'
},
title:{
    color:'white',
    textAlign:'center',
    alignSelf:'center'
},

这是我的结果：

Answer 1

试试这个...... 这是working demo

  container: {
    flex: 1,
    marginTop: 30,
    marginBottom: 30,
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 28,
    textAlign: 'center',
  },

Answer 2

对于那些寻找最简单案例的最小版本的人：

<View style={styles.containerView}>
  <Text style={styles.text}>I'm centered</Text>
</View>

const styles = StyleSheet.create({
  containerView: {
    justifyContent: 'center'
  }
  centeredText: {
    alignSelf: 'center'
  }
})

Answer 3

将 justifyContent: 'center' 添加到容器视图。 React Native 的工作方式与 react 不同。 所以 alignItems 不起作用，而是 justifyContent 起作用。

Answer 4

使用 textAlign: 'center' 属性使文本居中

使用 alignSelf:'center' 属性将视图居中

<View style={{alignSelf:'center'}}>

      <Text style={{textAlign:'center'}}>I'm centered</Text>

</View>

Answer 5

在主视图样式 flex:1 和文本集 textAlign:'center' 中设置

Answer 6

添加flexDirection:'column'有助于逐项集中对齐项目：

titleContainer: {
    flex: 1,
    marginTop:30,
    marginBottom:30,
    justifyContent:'center',
},
title:{
    color:'white',
    textAlign:'center',
    alignSelf:'center',
    flexDirection: 'column'
},