React Native: vertikale Zentrierung bei der Verwendung von ScrollView

Question

Ich verwende React Native und ich habe Probleme mit der vertikalen Zentrierung von Elementen, sobald ich eine ScrollView einführe. Um das zu demonstrieren, habe ich 3 Apps mit React Native Playground erstellt. Alle Beispiele haben 2 Seiten und können durch Antippen der blauen Taste umgeschaltet werden.

Beispiel 1:

Das erste Beispiel zeigt, vertikal auf Blöcke zentriert Seite 2. Dies geschieht, weil der Behälter diese Stile angewendet wurde:

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

https://rnplay.org/apps/lb5wSQ

jedoch Es gibt ein Problem, sobald Sie zu Seite 2 wechseln, da der gesamte Inhalt der Seite nicht passt. Daher benötigen wir eine ScrollView.

Beispiel 2

In diesem Beispiel habe ich alles einpacken innerhalb eines Scroll. Dies ermöglicht Seite 2 blättern, aber nun verlor ich die vertikale Zentrierung von Seite 1.

https://rnplay.org/apps/DCgOgA

Beispiel 3

Um 1 die vertikale Zentrierung der Seite, um zu versuchen und wieder, ich Wenden Sie flex: 1 auf die contentContainerStyle von ScrollView an. Dies legt die vertikale Zentrierung auf Seite 1, aber ich bin nicht mehr in der Lage den ganzen Weg bis auf den Boden 2.

https://rnplay.org/apps/LSgbog

auf Seite blättern Wie kann ich dieses Problem beheben, so dass ich vertikale Zentrierung erhalten Elemente auf Seite 1 noch ScrollView, um auf Seite 2 bis ganz nach unten zu scrollen?

Answer 1

Warum wickeln Sie nicht nur die zweite Seite in einem ScrollView ein?

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

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

Answer 2

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

Verwenden Sie für ältere Versionen von React Native, die flexGrow nicht unterstützen, die folgende Lösung.

---

Der einzige Weg, ich zuverlässig diese beiden gefunden haben, zu tun für iOS und Android ist minHeight der inneren Hinblick auf die Größe des ScrollView einzustellen. Z. B:

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

Hinweis: Ich habe in ausgekleideten die Stile und Funktionen, die oben die Einfachheit halber aber Sie wollen wahrscheinlich konstante Referenzen für die unveränderlichen Werte verwenden und den wechselnden Stil auswendig lernen, um unnötigen rerenders zu verhindern.

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 3

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

Answer 4

löste ich dieses Problem mit flexGrow statt flex

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

Dies macht den Inhalt Behälter strecken die Scroll zu füllen, aber die maximale Höhe nicht einschränken, so dass Sie immer noch richtig bewegen, wenn der Inhalt erweitert die Grenzen des Scroll

Answer 5

Hier ist mein Ansatz:

Verwendung einen äußeren Behälter mit flex : 1, dann die Scroll-Ansicht musshabenmit 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> 

Styles:

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