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

添加flexDirection:'column'幫助項目到b e按列中心排列：

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