如何垂直拉伸列形式的两个视图 - React Native Flex?

Question

我有这个视图，其中一列中有两个视图：

<View style={styles.container}>
<View style={styles.content}>
<View style={{backgroundColor: 'orange'}}>
<Text>Test</Text>
</View>
<View style={{backgroundColor: 'yellow'}}>
<Text>Test2</Text>
</View>
</View>
</View>

这是我的风格：

container: {
flexDirection: 'row',
backgroundColor: 'white',
justifyContent:'center',
alignItems:'center',
height: 80,
margin: 8,
},
content: {
flex:1,
alignItems: 'stretch',
flexDirection: 'column',
},

这是上面代码的屏幕截图。

如何让橙色和黄色视图垂直均匀扩展，而无需手动定义每个视图的高度？

内部的文本应居中，但左对齐。

Answer 1

向每个单元格添加flex: 1以使其展开，并添加justifyContent: 'center'以使文本垂直居中。喜欢这个：

<View style={styles.container}>
<View style={styles.content}>
<View style={{ backgroundColor: 'orange', flex: 1, justifyContent: 'center' }}>
<Text>Test</Text>
</View>
<View style={{ backgroundColor: 'yellow', flex: 1, justifyContent: 'center' }}>
<Text>Test2</Text>
</View>
</View>
</View>