[英]React Native: Setting flex:1 on a ScrollView contentContainerStyle causes overlapping of components
I have a ScrollView with 2 subviews and I want the first of them (lets call it ViewA) to have {flex: 1} so the other one (ViewB) will stick to the bottom of the screen - but only if their total height is smaller that the screen. 我有一个带有2个子视图的ScrollView,我希望他们中的第一个(让我们称之为ViewA)拥有{flex:1}所以另一个(ViewB)将坚持到屏幕的底部 - 但只有当他们的总高度是比屏幕小。 Of course that if they are higher than the screen I want it to scroll as usual.
当然,如果它们高于屏幕,我希望它像往常一样滚动。
Case 1 (GOOD): ViewA with long text, ViewB scrolls with it. 案例1(GOOD):带有长文本的ViewA,ViewB随之滚动。 https://rnplay.org/apps/slCivA
https://rnplay.org/apps/slCivA
Case 2 (BAD): ViewA with short text, ViewB doesn't stick to the bottom. 案例2(BAD):ViewA用短文本,ViewB不坚持到底部。 https://rnplay.org/apps/OmQakQ
https://rnplay.org/apps/OmQakQ
So I set the ScrollView's style AND contentContainerStyle to be flex: 1. I Also set ViewA's style to flex:1. 所以我将ScrollView的样式和contentContainerStyle设置为flex:1。我还将ViewA的样式设置为flex:1。 But when I do it, the ScrollView's contentContainer view is fixed to the screen height, thus not able to scroll if needed and even worse - ViewB overlaps ViewA.
但是当我这样做时,ScrollView的contentContainer视图固定在屏幕高度上,因此如果需要则无法滚动,甚至更糟糕 - ViewB与ViewA重叠。
Case 3 (BAD): ViewB sticks to the bottom, but the whole thing doesn't scroll. 案例3(BAD):ViewB坚持到底部,但整个事情不会滚动。 https://rnplay.org/apps/wZgtWA
https://rnplay.org/apps/wZgtWA
If it's a bug - how to fix/workaround it? 如果这是一个错误 - 如何修复/解决它? If it's the expected behaviour - how can I achieve what I've described?
如果这是预期的行为 - 我怎样才能实现我所描述的?
Thanks. 谢谢。
尝试将{flexGrow: 1}
给contentContainerStyle prop
Ok, so i wasn't able to get it work by styling alone, but here's how I did it: 好吧,所以我无法通过造型单独完成它,但这是我如何做到的:
onLayout
, and measure
) onLayout
,并measure
) measure
callback, I add the height (if needed) to a spacer view between ViewA and ViewB in order to place ViewB on the bottom. measure
回调中,我将高度(如果需要)添加到ViewA和ViewB之间的间隔视图,以便将ViewB放在底部。 my CJSX code (stripped and simplified version): 我的CJSX代码(剥离和简化版):
Dimensions = require('Dimensions')
windowSize = Dimensions.get('window')
MyClass = React.createClass
mixins: [TimerMixin]
render: ->
<ScrollView style={styles.container} automaticallyAdjustContentInsets={false}>
<View style={styles.mainContainer}>
... THIS IS VIEW A ...
</View>
{
if !@state.footerWasFixed
<View>
<ActivityIndicatorIOS/>
</View>
}
<View style={[styles.spacer, {height: @state.spacerSize || 0}]}></View>
<View onLayout={@measureFooterPosition} style={[styles.extras, {opacity: if @state.footerWasFixed then 1 else 0 }]} ref='extras'>
... THIS IS VIEW B ...
</View>
</ScrollView>
measureFooterPosition: ->
@refs.extras.measure(@fixFooterPosition)
fixFooterPosition: (ox, oy, width, height) ->
footerPosition = Math.round(oy + height)
diff = windowSize.height - footerPosition
if diff > 0
@setState(spacerSize: diff)
if !@state.footerWasFixed
@setTimeout (=>
@setState(footerWasFixed: true)
), 30
styles = StyleSheet.create(
container:
backgroundColor: 'grey'
flex: 1
spacer:
backgroundColor: 'white'
mainContainer:
flex: 1
backgroundColor: 'white'
extras:
backgroundColor: 'white')
It's very simplified code, (my view has requirements much more specific then this..) but I hope it helps anyone. 这是非常简化的代码,(我的观点有更具体的要求,然后这个...)但我希望它可以帮助任何人。
Ok, I've made a sample here , and I think I've resolved the problem. 好的,我在这里做了一个样本,我想我已经解决了这个问题。 The main thing I did was to make a main container view with two inner views, then set the inner views to flex at 80% and 20% (you can adjust to make it look the way you want).
我做的主要是制作一个带有两个内部视图的主容器视图,然后将内部视图设置为80%和20%的flex(您可以调整以使其看起来像您想要的那样)。
https://rnplay.org/apps/O4UxFA https://rnplay.org/apps/O4UxFA
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.