Native reagieren: Vertikale Zentrierung bei Verwendung von ScrollView

Ich verwende React Native und habe Probleme, die vertikale Zentrierung von Elementen beizubehalten, sobald ich eine ScrollView einführe. Zur Demonstration habe ich 3 Apps mit React Native Playground erstellt. Alle Beispiele haben 2 Seiten und können durch Tippen auf die blaue Schaltfläche umgeschaltet werden.

Beispiel 1:

Dieses erste Beispiel zeigt Blöcke, die vertikal auf Seite 2 zentriert sind. Dies geschieht, weil auf den Container die folgenden Stile angewendet werden:

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

https://rnplay.org/apps/lb5wSQ

Sobald Sie jedoch zu Seite 2 wechseln, tritt ein Problem auf, da der gesamte Inhalt der Seite nicht passt. Wir benötigen daher ein ScrollView.

Beispiel 2

In diesem Beispiel verpacke ich alles in eine ScrollView. Dadurch kann Seite 2 scrollen, aber jetzt habe ich die vertikale Zentrierung von Seite 1 verloren.

https://rnplay.org/apps/DCgOgA

Beispiel 3

Um zu versuchen, die vertikale Zentrierung von Seite 1 wiederherzustellen, wende ich mich flex: 1an contentContainerStyleScrollView an. Dadurch wird die vertikale Zentrierung auf Seite 1 behoben, aber ich kann auf Seite 2 nicht mehr ganz nach unten scrollen.

https://rnplay.org/apps/LSgbog

Wie kann ich das beheben, damit die Elemente auf Seite 1 vertikal zentriert werden und ScrollView dennoch auf Seite 2 ganz nach unten scrollen kann?

Ich habe dieses Problem mit flexGrow anstelle von flex gelöst

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

Dadurch wird der Inhaltscontainer gedehnt, um die ScrollView zu füllen, ohne die maximale Höhe einzuschränken. Sie können also weiterhin korrekt scrollen, wenn der Inhalt die Grenzen der ScrollView erweitert

Hier ist mein Ansatz:

Verwenden Sie einen äußeren Container mit flex : 1, dann muss die Bildlaufansicht {flexGrow : 1, justifyContent : 'center'}verwendet werden contentContainerStyle, nicht 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> 

Stile:

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

Es gibt eine neue Lösung (leider nur iOS im Moment) - wir können centerContentprop auf Scrollview verwenden.

EDIT: Sie können jetzt verwenden <ScrollView contentContainerStyle={{flexGrow: 1}}>.

flexGrowVerwenden Sie für ältere Versionen von React Native, die nicht unterstützt werden , die folgende Lösung.

Die einzige Möglichkeit, dies sowohl für iOS als auch für Android zuverlässig zu tun, besteht darin, minHeightdie innere Ansicht auf die Größe des zu setzen ScrollView. Z.B:

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

Hinweis: Der Einfachheit halber habe ich die oben genannten Stile und Funktionen integriert, aber Sie möchten wahrscheinlich konstante Referenzen für die unveränderlichen Werte verwenden und den sich ändernden Stil auswendig lernen, um unnötige erneute Darstellungen zu vermeiden.

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}
>

Um ScrollView selbst vertikal zu zentrieren, benötigen Sie eine solche Struktur:

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

Andernfalls benötigen Sie Folgendes, wenn Sie ScrollView-Inhalte selbst zentrieren möchten:

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

Warum verpacken Sie nicht nur die zweite Seite in eine ScrollView?

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

Ändern Sie einfach Ihr erstes Beispiel, es funktioniert wie ein Zauber :)