React native 如何垂直拉伸列结构中的两个视图-React Native Flex？

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

    <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>

下面是上面代码的一个示例

如何使橙色和黄色视图在不手动定义每个视图的高度的情况下均匀地垂直展开

---

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

向每个单元格添加

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>

试验
测试2

如果我希望顶部视图为75%，底部视图为25%，该怎么办？请使用flex:3和flex:1有关flex的更多信息：

  <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>