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.React Native: vertikale Zentrierung bei der Verwendung von ScrollView
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?
Können Sie eine Lösung dafür finden? – Zach
@Zach Nein, aber ich habe das schon lange nicht mehr angeschaut. Ist das immer noch ein Problem? –