React Native: vertical centering when using ScrollView

前端 未结 6 526
孤街浪徒
孤街浪徒 2021-01-30 12:28

I\'m using React Native and I\'m having trouble retaining vertical centering of elements as soon as I introduce a ScrollView. To demonstrate, I created 3 apps with React Native

相关标签:
6条回答
  • 2021-01-30 12:53

    Why don't you wrap only second page within a ScrollView?

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

    Just modify your first example, it works like a charm :)

    0 讨论(0)
  • 2021-01-30 12:56

    I solved this issue with flexGrow instead of flex

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

    This makes the content container stretch to fill the ScrollView but does not restrict the maximum height, so you can still scroll correctly when the content extends the bounds of the ScrollView

    0 讨论(0)
  • 2021-01-30 13:02

    Here is my approach:

    Use an outer container with flex : 1, then the scroll view needs to have {flexGrow : 1, justifyContent : 'center'} using contentContainerStyle, not 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> 
    

    Styles:

    const styles = StyleSheet.create({scrollView : {
    height : Dimensions.get('window').height, }, mainContainer : {
    flex : 1 }, scrollViewContainer : { }, })
    
    0 讨论(0)
  • 2021-01-30 13:02

    There's a new solution (unfortunately iOS only at the moment) - we can use centerContent prop on Scrollview.

    0 讨论(0)
  • 2021-01-30 13:07

    EDIT: You can now use <ScrollView contentContainerStyle={{flexGrow: 1}}>.

    For older version of React Native that do not support flexGrow, use the solution below.


    The only way I have found to reliably do this for both iOS and Android is to set minHeight of the inner view to the size of the ScrollView. E.g:

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

    Note: I have in-lined the styles and functions above for simplicity but you will probably want to use constant references for the unchanging values and memorise the changing style to prevent unnecessary rerenders.

    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}
    >
    
    0 讨论(0)
  • 2021-01-30 13:13

    In order to center ScrollView itself vertically, then you need to have such kind of structure:

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

    Otherwise, if you want to center ScrollView content itself, then you need the following:

    <ScrollView contentContainerStyle={{flexGrow : 1, justifyContent : 'center'}} ...>
    
    0 讨论(0)
提交回复
热议问题