ReactNative ScrollView nicht nach unten scrollen

Wenn ich versuche zu scrollen, um die Unterseite meines ScrollView, so springt er zurück auf seine Ausgangsposition und wird nicht lassen Sie mich sehen die Gesamtheit seiner Inhalte.

Meine ( gekürzte ) setup ist ziemlich einfach :

  <View>
    <View>
      <ABunchOfStuff />
    </View>   
    <View style={styles.sectionNode} >
      <ABunchOfStuff />
    </View>   
    <ScrollView>    <------ My broken ScrollView :(
      <View>
        <ABunchOfStuff />
      </View>
    </ScrollView>   
  </View>

Dies ist eine vereinfachte version von meinem eigentlichen code. Aber ich bin erreichen der Schlussfolgerung, dass es eine Art "unbegrenzte Höhe" geht auf wie in dieser Referenz.

Ich habe versucht, sicherstellen, dass alles und alle Eltern haben flex: 1 alle den Weg zum Kind <View> meiner <ScrollView> und bis zu seinen Eltern. Aber das hat nicht scheinen, um den trick zu tun.

Jede Idee, wie Debuggen? Ich weiß ReactNative website empfiehlt dies und sagt, es wäre einfach zu tun, in der inspector ( aber mit keine Anweisungen, wie es zu tun ). Wenn meine Annahme, dass es eine "unbegrenzte Höhe" Frage, wie würde man gehen und finden, dieser Schelm ankten Knoten? Oder ist es etwas anderes?

InformationsquelleAutor Trip | 2017-04-06

react-native scrollview

2

Begrenzt die Höhe Dingens heißt die ScrollView selbst gebunden werden muss.
Wenn der ScrollView hat unbegrenzter Höhe, es wird gestreckt, mit dem Inhalt, und nicht scrollen.

Können Sie fügen Sie einfach height zu den ScrollView und sehen, wie das funktioniert, von dort aus können Sie die absolute Höhe ein, oder verwenden Sie die flex in einer Weise, die die Grenze ScrollView Höhe, was Sie wollen.
- Hmm.. auch wenn ich explizit einen hoch auf den ScrollView, es noch prallt zurück.
- Was meinst du mit "prallt zurück"? Nicht zufällig gehen von der Mitte zu beginnen? Was passiert und Wann?
InformationsquelleAutor Moti Azu
13

Versuchen Sie die Einnahme von flex aus der ScrollView vollständig und legen Sie einfach flex: 1 auf die Muttergesellschaft. Das Tat den trick für mich.

InformationsquelleAutor Christopher R.
5

Für mich das problem war die Einstellung einer paddingVertical, paddingTop oder paddingBottom auf der ScrollView. Nur tun Sie das nicht. Sie beeinflusst die Höhe der den Inhalt der ScrollView, ohne ScrollView anpassen, um es angemessen.

InformationsquelleAutor David Nathan
2

Müssen Sie sicherstellen, dass ScrollView hat eine Feste Höhe, entweder indem es für die Eltern oder für sich selbst.

Ich flex verwenden, um Ihre Höhe anstatt der Angabe es direkt so funktioniert das auf allen Bildschirm-Größe. Also bei deinem code so etwas wie
```
<View style={{flex: 1}}>
    <View>
      <ABunchOfStuff />
    </View>   
    <View style={styles.sectionNode} >
      <ABunchOfStuff />
    </View>   
    <ScrollView style={{flex:0.8}}>
      <View>
        <ABunchOfStuff />
      </View>
    </ScrollView>   
</View>
```
Mehr Informationen reagieren nativen docs
- Ich habe flex set für jeden Knoten oben und unten in der Kette. Und auch mit dem gleichen link, den Sie in meiner Frage.
- Können Sie die update-Frage mit dem Stil-Elemente für die einzelnen anzeigen? Ich hatte ähnliches problem, und ich sah mein code wieder. Ich habe ScrollView eingewickelt in eine View, die hat einen flex anstatt es selbst in der ScrollView. Können Sie prüfen, die aktualisierte Antwort?
InformationsquelleAutor coder hacker
2

Den übergeordneten Sicht muss haben Stil={{flex: 1}}, dann die scrollview kann style={{flex: 1}} ?

InformationsquelleAutor Kristian

<ScrollView  style={{flex: 1, marginBottom: 30}} /> 
    items
</ScrollView>

InformationsquelleAutor Mahdi Bashirpour

0

Dies funktioniert für mich
```
    <ScrollView>
       <View style={{height:2000}}>

       </View>
    <ScrollView>
```
Die wichtige Sache ist, um eine definierte Höhe für die Elemente, die innerhalb der ScrollView

InformationsquelleAutor El Grones

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.