React Native:使用ScrollView时的垂直居中

Question

我正在使用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到了contentContainerStyle滚动型的.这修复了第1页的垂直居中,但我不再能够一直向下滚动到第2页的底部.

https://rnplay.org/apps/LSgbog

我如何解决这个问题,以便我在第1页上获得元素的垂直居中,但仍然可以让ScrollView一直滚动到第2页的底部？

Answer 1

我用flexGrow而不是flex解决了这个问题

<ScrollView contentContainerStyle={{flexGrow: 1}}>

这使得内容容器拉伸以填充ScrollView但不限制最大高度,因此当内容扩展ScrollView的边界时仍可以正确滚动

Answer 2

这是我的方法:

使用外部容器flex : 1,然后滚动视图需要{flexGrow : 1, justifyContent : 'center'}使用contentContainerStyle,而不是style.

<View style={styles.mainContainer}>
  <ScrollView
    contentContainerStyle={{flexGrow : 1, justifyContent : 'center'}}>
      <View style={styles.scrollViewContainer}>
        //Put your stuff here, and it will be centered vertical
      </View>
  </ScrollView>
</View> 

样式:

const styles = StyleSheet.create({scrollView : {
height : Dimensions.get('window').height, }, mainContainer : {
flex : 1 }, scrollViewContainer : { }, })

Answer 3

为了使 ScrollView 本身垂直居中，您需要具有这样的结构：

<View style={{flex: 1}}>
  <View>
   <ScrollView .../>
  </View>
</View>

否则，如果您想让 ScrollView 内容本身居中，那么您需要以下内容：

<ScrollView contentContainerStyle={{flexGrow : 1, justifyContent : 'center'}} ...>

Answer 4

有一个新的解决方案（不幸的是，目前仅适用于 iOS）——我们可以centerContent在 Scrollview 上使用prop。