如何在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