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

试试这个...这是一个有效的演示

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