React Native：如何让ScrollView内的View填充剩余高度

问题根源 #

ScrollView默认是跟着内容高度自适应的，哪怕给contentContainerStyle加了flexGrow:1，如果ScrollView本身没占满父容器的可用高度，内部的flex布局根本起不了作用。另外，第一个没设高度的View会被flex布局压缩到最小高度，第二个View的flex:1自然没有剩余空间可填充。

具体解决步骤 #

• 给ScrollView添加style={{ flex: 1 }}，让它占满父组件的所有可用高度，这样contentContainerStyle的flexGrow:1才能让内容容器撑满ScrollView的高度。
• 给第一个View加flexShrink: 0（如果需要它保持自身内容的高度，不被压缩）；要是第一个View只是占位，直接给它设置minHeight也行。
• 第二个View保留flex:1，同时给内部的LinearGradient也添加flex:1，确保渐变能填满整个View。

修正后的代码示例 #

<ScrollView 
  style={{ flex: 1 }}
  contentContainerStyle={{ flexGrow: 1 }}
>
  {/* 第一个View：flexShrink:0避免被压缩 */}
  <View style={{ flexShrink: 0 }}>
    {/* 这里放置第一个View的内容，比如文字、图片等 */}
  </View>
  
  {/* 第二个View占满剩余高度 */}
  <View style={{ flex: 1 }}>
    <LinearGradient 
      colors={['#ff0000', '#00ff00']}
      style={{ flex: 1 }}
    />
  </View>
</ScrollView>

额外提醒 #

• 如果第一个View没有任何内容，它的高度会是0，这时候第二个View的flex:1会直接撑满整个ScrollView。要是需要第一个View有基础高度，直接给它设置minHeight或者固定高度即可。
• 别忘了ScrollView的父组件也要设置flex:1，不然ScrollView无法获取到可用的高度空间。

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