React Native Flex：如何让列布局的两个View垂直均等拉伸？

嘿，我来帮你搞定这个布局需求！要让橙色和黄色的View不用手动设高度就垂直平分，同时内部Text保持垂直居中、水平左对齐，只需要做几个小调整就行，咱们来一步步改：

核心修改思路 #

原来的代码里，content容器是垂直列布局，但内部的两个子View没有设置flex:1，所以它们只会包裹内容高度；同时文本的对齐方式也需要微调。

修改后的完整代码 #

组件部分 #

<View style={styles.container}>
  <View style={styles.content}>
    <View style={styles.colorBlock}>
      <Text style={styles.blockText}>Test</Text>
    </View>
    <View style={[styles.colorBlock, {backgroundColor: 'yellow'}]}>
      <Text style={styles.blockText}>Test2</Text>
    </View>
  </View>
</View>

样式部分 #

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
    height: 80,
    margin: 8,
  },
  content: {
    flex: 1,
    alignItems: 'stretch',
    flexDirection: 'column',
    height: '100%', // 确保content占满父容器的高度
  },
  colorBlock: {
    flex: 1, // 关键：让每个色块平分垂直空间
    backgroundColor: 'orange',
    justifyContent: 'center', // 让文本垂直居中
    alignItems: 'flex-start', // 让文本水平左对齐
    paddingLeft: 8, // 可选：给文本加个左边距，避免贴边
  },
  blockText: {
    textAlign: 'left', // 双重保障：确保文本左对齐
  },
});

关键修改点说明 #

• 给两个颜色View添加flex:1：在垂直列布局的content容器里，每个设置了flex:1的子元素会自动平分容器的垂直可用空间，不用手动写高度。
• 文本对齐：通过justifyContent: 'center'让Text在垂直方向居中，alignItems: 'flex-start'让Text在水平方向左对齐；同时给Text加textAlign: 'left'做双重保障，避免特殊情况出错。
• 给content添加height: '100%'：确保它完全占满父容器container的80px高度，这样内部的色块才能正确拉伸。

这样调整后，你就能得到两个均等高度的色块，内部文本也会符合垂直居中、水平左对齐的要求啦！

内容的提问来源于stack exchange，提问作者slimbean