我正在使用React Native,当我引入ScrollView后,无法保持元素的垂直居中。为了演示这一点,我使用React Native Playground创建了3个应用程序。所有示例都有两个页面,并且可以通过点击蓝色按钮进行切换。
示例1:
在第2页上,此示例显示垂直居中的块。这是因为容器应用了以下样式:
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
https://rnplay.org/apps/lb5wSQ
然而,当你切换到第二页时就会出现问题,因为整个页面内容无法适应,所以我们需要一个ScrollView
。
示例2
在这个示例中,我将所有内容都包含在一个ScrollView
中。这样可以让第二页滚动,但是第一页的垂直居中就丢失了。
https://rnplay.org/apps/DCgOgA
示例3
为了尝试恢复第一页的垂直居中,我在ScrollView
的contentContainerStyle
上应用了flex: 1
。这修复了第一页的垂直居中,但我不能再滚动到第二页的底部。
https://rnplay.org/apps/LSgbog
我该如何解决这个问题,以使得第一页的元素垂直居中,同时在第二页仍然能够完全滚动?