我正在使用React Native,一旦引入了ScrollView,我就无法保留元素的垂直居中.为了演示,我用React Native Playground创建了3个应用程序.所有示例都有2页,可以通过点击蓝色按钮来切换.
示例1:
第一个示例显示了第2页上的垂直居中的块.这是因为容器已应用了这些样式:
flex: 1,flexDirection: 'column',justifyContent: 'center',
https://rnplay.org/apps/lb5wSQ
但是,只要切换到第2页,由于页面的整个内容都不适合,所以我们需要一个ScrollView.
实施例2
在这个例子中,我把所有内容都包含在ScrollView中.这允许第2页滚动,但是现在我失去了第1页的垂直居中.
https://rnplay.org/apps/DCgOgA
实施例3
为了尝试并恢复第1页的垂直居中,我将flex:1应用于ScrollView的contentContainerStyle.这将修正第1页上的垂直居中点,但是我不能再一直滚动到第2页的底部.
https://rnplay.org/apps/LSgbog
如何解决这个问题,以便在第1页上获得垂直居中的元素,但仍然可以将ScrollView滚动到第2页的底部?
我用flexGrow而不是flex解决了这个问题
< ScrollView contentContainerStyle = {{flexGrow:1}}>
这使得内容容器伸展来填充ScrollView,但不限制最大高度,因此当内容扩展ScrollView的边界时,您仍然可以正确滚动
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。