React Native：使用ScrollView时垂直居中

Question

我正在使用 React Native，一旦我引入了 ScrollView，我就很难保留元素的垂直居中。为了进行演示，我使用 React 原生游乐场创建了 3 个应用。所有示例都有 2 个页面，可以通过点击蓝色按钮来切换它们。

示例 1：

第一个示例显示了在第 2 页上垂直居中的块。发生这种情况是因为容器应用了以下样式：

flex: 1,
flexDirection: 'column',
justifyContent: 'center',

https://rnplay.org/apps/lb5wSQ

但是，一切换到第2页就有一个问题，因为页面的整个内容都不合适，所以我们需要一个ScrollView。

示例 2

在此示例中，我将所有内容包装在滚动视图中。这允许页面2滚动，但现在我失去了页面1的垂直居中。

https://rnplay.org/apps/DCgOgA

示例 3

为了尝试恢复页面1的垂直居中，我将< code>flex: 1应用于ScrollView的< code > contentContainerStyle 。这修复了第1页的垂直居中，但是我不再能够一直向下滚动到第2页的底部。

https://rnplay.org/apps/LSgbog

如何解决这个问题，使我在第1页上的元素垂直居中，但仍能让ScrollView一直滚动到第2页的底部？

Answer 1

有一个新的解决方案（不幸的是目前只有iOS）-我们可以在Scrollview上使用centerContentprop。

Answer 2

这是我的方法：

使用带有flex:1的外部容器，则滚动视图需要具有{flexGrow:1，justifyContent:'center'}using 。

<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

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

<代码>

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