如何在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%的屏幕。如何制作一个像下面图片中那样具有顶部、中间和底部元素的滚动视图。

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

- 1110

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>

这是屏幕截图

- Ijharul Islam

---

你能说明为什么在这种情况下使用flexGrow有帮助吗？ - M1ke

在度过了三天的绝望时光后，这份信息让我避免了疯狂。 - cagri

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

- Brian