如何在ScrollView中使组件粘到底部，但仍然允许其他内容将其推下

Question

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

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

如果我删除flex: 1滚动视图大约占屏幕的50％。 如何使用顶部，中间和底部元素制作滚动视图，如下图所示。

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

Answer 1

使用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>

这是截图

Answer 2

通过删除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文档：https://facebook.github.io/react-native/docs/scrollview.html