React Native 父View设flexDirection为row时子View无法占满宽度需动态等分

核心实现逻辑 #

父容器设置flexDirection: 'row'时，布局主轴为水平方向，给所有需要等分空间的子组件添加统一的flex: 1属性，即可自动将父容器的全部水平宽度无间隔平分给所有子组件，完全覆盖父容器的背景区域。不管容器内是2个、3个还是任意数量的子组件，都能适配均分。
之前尝试设置属性未达到预期，通常是两个常见问题：

• 给子组件设置了固定width值，固定宽度的优先级高于flex的空间分配规则，会覆盖等分效果
• 父容器本身没有撑满外层可用宽度，导致整个容器的宽度仅等于所有子元素的内容宽度，看起来没有占满效果

修正后的代码示例 #

<View style={{flexDirection: 'row', backgroundColor: 'yellow'}}>
  <TouchableOpacity
    style={{
      flex: 1,
      padding: 5,
      borderWidth: 1,
      backgroundColor: 'pink',
    }}>
    <Text style={styles.goldenText}>Cancel</Text>
  </TouchableOpacity>
  <TouchableOpacity
    style={{
      flex: 1,
      padding: 5,
      borderWidth: 1,
      backgroundColor: 'pink',
    }}>
    <Text style={styles.goldenText}>Cancel</Text>
  </TouchableOpacity>
</View>

方案优势 #

• 适配任意数量的子组件：新增同类子组件时，只要给新组件同样加上flex:1属性，不需要手动计算每个组件的宽度占比，比如放入3个带flex:1的子组件，就会自动将父容器宽度拆分为3等份
• 避免硬写宽度的误差：不需要手动计算类似width: '33.3%'的占比值，不需要额外处理边框、padding带来的宽度溢出/不足问题
• 扩展灵活：后续如果需要给子组件之间加固定间距，直接给父容器添加gap属性即可，不会破坏原有的等分逻辑

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