我正在使用React Native,当我引入ScrollView时,我很难保持元素的垂直居中。为了演示,我使用React Native Playground创建了3个应用程序。所有示例都有2页,可以通过点击蓝色按钮进行切换。
示例1:
第一个示例显示了在页面2上垂直居中的块。这是因为容器应用了这些样式:
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
https://rnplay.org/apps/lb5wSQ
但是,一旦切换到第2页,就会出现问题,因为页面的整个内容都放不下,所以我们需要一个ScrollView
。
实施例2
在这个例子中,我将所有内容都 Package 在ScrollView中。这允许第2页滚动,但现在我失去了第1页的垂直居中。
https://rnplay.org/apps/DCgOgA
实施例3
为了尝试恢复Page 1的垂直居中,我将flex: 1
应用于ScrollView的contentContainerStyle
。这修复了第1页的垂直居中,但我不再能够一直滚动到第2页的底部。
https://rnplay.org/apps/LSgbog
我如何解决这个问题,使我在第1页的元素垂直居中,但仍然让ScrollView滚动到第2页的底部?
7条答案
按热度按时间cczfrluj1#
我用flexGrow而不是flex解决了这个问题
<ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}>
这将使内容容器拉伸以填充ScrollView,但不限制最大高度,因此当内容扩展到ScrollView的边界时,您仍然可以正确滚动
33qvvth12#
这是我的方法。
使用
flex : 1
的外部容器,那么滚动视图需要使用contentContainerStyle
的{flexGrow : 1, justifyContent : 'center'}
,而不是style
。款式:
lf3rwulv3#
有一个新的解决方案(不幸的是目前只有iOS)-我们可以在Scrollview上使用
centerContent
prop 。jc3wubiy4#
为了使ScrollView本身垂直居中,那么你需要有这样的结构:
否则,如果你想让ScrollView内容本身居中,那么你需要以下内容:
ar5n3qh55#
**编辑:**您现在可以使用
<ScrollView contentContainerStyle={{flexGrow: 1}}>
。对于不支持
flexGrow
的旧版本React Native,请使用以下解决方案。我发现,在iOS和Android上可靠地做到这一点的唯一方法是将内部视图的
minHeight
设置为ScrollView
的大小。例如:注意:为了简单起见,我已经内联了上面的样式和函数,但是你可能想对不变的值使用常量引用,并记住变化的样式,以防止不必要的重新呈现。
gzszwxb46#
为什么不在ScrollView中只换行第二页?
只要修改你的第一个例子,它就像一个魅力:)
wa7juj8i7#
我只是简单地使用
在所需视图中,例如: