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应用于ScrollView的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 contentContainerStyle={{flexGrow: 1}}>。

对于不支持flexGrow的旧版React Native，请使用以下解决方案。

我发现为iOS和Android可靠地执行此操作的唯一方法是将内部视图的minHeight设置为ScrollView的大小。 E.g：

<ScrollView
    style={{flex: 1}}
    contentContainerStyle={{minHeight: this.state.minHeight}}
    onLayout={event => this.setState({minHeight: event.nativeEvent.layout.height})}
>

注意：为简单起见，我在上面列出了上面的样式和函数，但您可能希望对不变的值使用常量引用并记住更改的样式以防止不必要的重新呈现。

const {minHeight} = this.state;
// Manually memorise changing style or use something like reselect...
if (this.lastMinHeight != minHeight) {
    this.lastMinHeight = minHeight;
    this.contentContainerStyle = {minHeight: minHeight}
}
<ScrollView
    style={styles.scrollViewStyle}
    contentContainerStyle={this.contentContainerStyle}
    onLayout={this.onScrollViewLayout}
>

Answer 4

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

Answer 5

为什么不在ScrollView中仅包装第二页？

return (
    <ScrollView >
        <View style={styles.lipsum}>
            {this.renderButton()}
            <Text style={styles.lipsumText}>{lipsumText}</Text>
        </View>
    </ScrollView>
  );

只需修改你的第一个例子，就像魅力一样：）

Answer 6

为了使ScrollView自身垂直居中，则需要具有这种结构：

app.intent('second', (conv) => {
  console.log(conv.userDoc); // returns undefined
})

否则，如果要将居中的ScrollView内容居中，则需要满足以下条件：

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

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

6 个答案: