React native 如何使组件在ScrollView中粘到底部，但仍有其他内容将其向下推

我有三个视图：一个在顶部、中间和底部。滚动视图占据整个屏幕。问题是现在滚动视图不可滚动

<ScrollView contentContainerStyle={{flex: 1, backgroundColor: '#00ff00', flexDirection: 'column', justifyContent: 'space-between'}}>
  <View><SomeContent /></View>
  <View><SomeContent /></View>
  <View><SomeContent /></View>
</ScrollView>

如果我删除

flex:1

滚动视图占屏幕的50%。 如何制作具有顶部、中部和底部元素的滚动视图，如下图所示

---

底部元素应始终位于底部，但当顶部两个组件的高度较大时，它们应向下推动底部组件，以便我可以使用滚动视图向上/向下移动。

使用flexGrow而不是flex。下面给出了示例代码

<ScrollView 
  contentContainerStyle={{ 
  flexGrow: 1, 
  flexDirection: 'column', 
  justifyContent: 'space-between'
}}>
  <View style={{ width: 50, height: 1000, backgroundColor:'orange' }} />
  <View style={{ width: 50, height: 50, backgroundColor:'black'}} />
  <View style={{ width: 50, height: 50, backgroundColor:'blue'}} />
</ScrollView>

这是截图

---

通过删除flex:1，您只能看到视图的确切高度

  <ScrollView contentContainerStyle={{ backgroundColor: '#00ff00', 
      flexDirection: 'column', justifyContent: 'space-between' }}>
    <View style={{ width: 100, height: 100, backgroundColor:'#b0e0e6' }} />
    <View style={{ width: 100, height: 100, backgroundColor:'#87ceeb'}} />
    <View style={{ width: 100, height: 100, backgroundColor:'#4682b4'}} />
  </ScrollView>

如果设置flex:1或flexGrow:1，ScrollView会将最小高度设置为屏幕高度

  <ScrollView contentContainerStyle={{ flex: 1, backgroundColor: '#00ff00', 
      flexDirection: 'column', justifyContent: 'space-between' }}>
    <View style={{ width: 100, height: 100, backgroundColor:'#b0e0e6' }} />
    <View style={{ width: 100, height: 100, backgroundColor:'#87ceeb'}} />
    <View style={{ width: 100, height: 100, backgroundColor:'#4682b4'}} />
  </ScrollView>

如果视图的累积高度大于此值，则整个视图将超出屏幕高度。在这种情况下，flexGrow:1（下面部分滚动显示）将允许您滚动到内容，但flex:1将切断它

  <ScrollView contentContainerStyle={{ flexGrow: 1, backgroundColor: '#00ff00', 
      flexDirection: 'column', justifyContent: 'space-between'}}>
    <View style={{ width: 100, height: 700, backgroundColor:'#b0e0e6' }} />
    <View style={{ width: 100, height: 100, backgroundColor:'#87ceeb'}} />
    <View style={{ width: 100, height: 100, backgroundColor:'#4682b4'}} />
  </ScrollView>

从这里，您可以在每个视图上设置Flex，以对视图填充的空白空间进行加权。例如，如果在顶部两个视图中的每个视图上设置flex:1，在底部视图上设置flex:2，则在考虑内容高度后，底部视图将从总高度的1/2增加到顶部两个视图的1/4。像这样：

  <ScrollView contentContainerStyle={{ flexGrow: 1, backgroundColor: '#00ff00', 
      flexDirection: 'column', justifyContent: 'space-between'}}>
    <View style={{ flex: 1, width: 100, height: 100, backgroundColor:'#b0e0e6' }} />
    <View style={{ flex: 1, width: 100, height: 100, backgroundColor:'#87ceeb'}} />
    <View style={{ flex: 2, width: 100, height: 100, backgroundColor:'#4682b4'}} />
  </ScrollView>

---

ScrollView文档：

您是否能够说明为什么flexGrow在这种情况下有帮助？