如何使组件粘在ScrollView底部，但仍然让其他内容推倒 [英] How to make component stick to bottom in ScrollView but still alow other content to push it down

问题描述

我有三个意见：一个在顶部，中间和底部。滚动视图占据整个屏幕。

 < 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：' '}}>-之间空间; 
< 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> 
  

以下是截图

I have three views: one at the top, middle and bottom. The scroll view takes the whole screen. The problem is that now scroll view is not scrollable.

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

If I remove flex: 1 scroll view takes about 50% of the screen. How do I make a scroll view with top, middle and bottom elements like on the image bellow.

The bottom element should be at the bottom all the time but when the top two components' height is large they should push the bottom component down so I can use scroll view to move up/down.

解决方案

Use flexGrow instead of flex. Example code is given bellow.

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

Here is the screenshot

这篇关于如何使组件粘在ScrollView底部，但仍然让其他内容推倒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！