React Native中如何用Flex实现三个垂直View的自适应空间分配？

你的代码无法达到预期效果，核心问题是底部组件的flex属性配置不当，导致中间组件无法稳定占据剩余空间。以下是修正后的实现方案：

修正代码 #

<View style={{ flex: 1, flexDirection: 'column' }}>
  {/* 顶部固定高度组件 */}
  <View style={{ height: 50 }}>... 内容 ...</View>
  {/* 中间填充剩余空间的组件 */}
  <View style={{ flex: 1 }}>... 内容 ...</View>
  {/* 底部内容驱动、带高度上限的组件 */}
  <View style={{ flexShrink: 1, maxHeight: '50%' }}>... 内容 ...</View>
</View>

关键配置说明 #

• 父容器：flex:1确保它占满父级提供的可用空间，flexDirection: 'column'维持垂直堆叠布局。
• 顶部组件：固定height:50，不受flex布局的空间分配规则影响。
• 中间组件：使用flex:1，这会让它自动填充顶部和底部组件之外的所有剩余空间（相当于同时设置flexGrow:1, flexShrink:1, flexBasis:0）。
• 底部组件：
  • flexShrink:1：确保当内容高度超过maxHeight限制时，组件会被压缩以不超出上限。
  • maxHeight: '50%'：限制组件最大高度为父容器高度的50%，未达上限时则根据内容自动扩展高度。

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