Wie machen Komponente stick nach unten in das ScrollView aber noch alow andere Inhalte, um es nach unten drücken

Habe ich drei Ansichten: eine oben, Mitte und unten. Das scroll-Ansicht nimmt den ganzen Bildschirm. Das problem ist, dass jetzt die scroll-view ist nicht Scrollbar.

<ScrollView contentContainerStyle={{flex: 1, backgroundColor: '#00ff00', flexDirection: 'column', justifyContent: 'space-between'}}>
  <View><SomeContent /></View>
  <View><SomeContent /></View>
  <View><SomeContent /></View>
</ScrollView>

Wenn ich entfernen flex: 1 scroll-view dauert etwa 50% des Bildschirms.
Wie mache ich eine scroll-view mit oberen, mittleren und unteren Elementen, wie auf dem Bild unten.

Dem unteren element sein sollte, auf den Boden die ganze Zeit, aber wenn die beiden oberen Komponenten' Höhe groß ist, sollten Sie drücken Sie die untere Komponente nach unten, so ich kann mit scroll-Ansicht zu bewegen, up/down.

InformationsquelleAutor 1110 | 2017-05-05

flexbox react-native

Verwenden flexGrow anstelle von flex. Beispiel-code finden Sie unten.

<ScrollView 
  contentContainerStyle={{ 
  flexGrow: 1, 
  flexDirection: 'column', 
  justifyContent: 'space-between'
}}>
  <View style={{ width: 50, height: 1000, backgroundColor:'orange' }} />
  <View style={{ width: 50, height: 50, backgroundColor:'black'}} />
  <View style={{ width: 50, height: 50, backgroundColor:'blue'}} />
</ScrollView>

Hier ist der screenshot

Wie machen Komponente stick nach unten in das ScrollView aber noch alow andere Inhalte, um es nach unten drücken

Sind Sie in der Lage anzugeben, warum flexGrow hilft in diesem Fall?

InformationsquelleAutor Ijharul Islam

Durch entfernen von flex: 1, die Sie sehen, nur die genaue Höhe für die Aussicht.

  <ScrollView contentContainerStyle={{ backgroundColor: '#00ff00', 
      flexDirection: 'column', justifyContent: 'space-between' }}>
    <View style={{ width: 100, height: 100, backgroundColor:'#b0e0e6' }} />
    <View style={{ width: 100, height: 100, backgroundColor:'#87ceeb'}} />
    <View style={{ width: 100, height: 100, backgroundColor:'#4682b4'}} />
  </ScrollView>

Wie machen Komponente stick nach unten in das ScrollView aber noch alow andere Inhalte, um es nach unten drücken

Wenn Sie flex: 1 oder flexGrow: 1, ScrollView wird die min-height auf die Höhe des Bildschirms.

  <ScrollView contentContainerStyle={{ flex: 1, backgroundColor: '#00ff00', 
      flexDirection: 'column', justifyContent: 'space-between' }}>
    <View style={{ width: 100, height: 100, backgroundColor:'#b0e0e6' }} />
    <View style={{ width: 100, height: 100, backgroundColor:'#87ceeb'}} />
    <View style={{ width: 100, height: 100, backgroundColor:'#4682b4'}} />
  </ScrollView>

Wie machen Komponente stick nach unten in das ScrollView aber noch alow andere Inhalte, um es nach unten drücken

Wenn die kumulative Höhe der Ansichten, die größer ist als diese, die gesamte Ansicht erstrecken sich über die Höhe des Bildschirms. In diesem Fall flexGrow: 1 (siehe teilweise gescrollt unten), können Sie scrollen, um den Inhalt, aber flex: 1 wird es abgeschnitten.

  <ScrollView contentContainerStyle={{ flexGrow: 1, backgroundColor: '#00ff00', 
      flexDirection: 'column', justifyContent: 'space-between'}}>
    <View style={{ width: 100, height: 700, backgroundColor:'#b0e0e6' }} />
    <View style={{ width: 100, height: 100, backgroundColor:'#87ceeb'}} />
    <View style={{ width: 100, height: 100, backgroundColor:'#4682b4'}} />
  </ScrollView>

Wie machen Komponente stick nach unten in das ScrollView aber noch alow andere Inhalte, um es nach unten drücken

Von dort aus, können Sie flex auf jede der Ansichten an Gewicht, wie der leere Raum wird gefüllt sein von der Aussicht. Zum Beispiel, wenn Sie flex: 1 auf jede der beiden Ansichten und flex: 2 auf der Unterseite, dann nach Buchhaltung für den Inhalt der Höhe, Ansicht von unten gegeben wird, die 1/2 der Gesamthöhe von 1/4 für jede der beiden Ansichten. Wie diese:

  <ScrollView contentContainerStyle={{ flexGrow: 1, backgroundColor: '#00ff00', 
      flexDirection: 'column', justifyContent: 'space-between'}}>
    <View style={{ flex: 1, width: 100, height: 100, backgroundColor:'#b0e0e6' }} />
    <View style={{ flex: 1, width: 100, height: 100, backgroundColor:'#87ceeb'}} />
    <View style={{ flex: 2, width: 100, height: 100, backgroundColor:'#4682b4'}} />
  </ScrollView>

Wie machen Komponente stick nach unten in das ScrollView aber noch alow andere Inhalte, um es nach unten drücken

ScrollView-Dokumentation: https://facebook.github.io/react-native/docs/scrollview.html

Vielen Dank für die gute Niveau der info

InformationsquelleAutor user7363719

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.