react-native - 如何垂直拉伸(stretch)列中的两个 View - React Native Flex？

Question

我有这个 View ，其中一列中有两个 View :

    <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',
},

这是一个ScreenShot上面代码的外观。

如何让橙色和黄色的 View 在垂直方向上均匀展开，而不用手动定义它们的高度？

里面的文字应该居中，但是左对齐。

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>