Reagieren Native: ListView nicht mit der Anzeige aller Zeilen

Ich versuche, um eine Liste von Zeilen in eine Reagieren Nativen ListView, aber es zeigt nur die Einträge an, die Passform in einem einzigen Bildschirm, dh, ich kann nicht scrollen nach unten, um weitere Zeilen.

Hier sind die Stile:

styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 60
  },
  rowContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around'
  }
})

ListView:

return (
      <View style={styles.container}>
        {this.getHeader()}
        <ListView
          dataSource = {this.state.dataSource}
          renderRow = {this.renderRow.bind(this)}/>
      </View>
    )

Zeile:

return (
      <View style={styles.rowContainer}>
        <Text>{text}</Text>
      </View>
    )

Was mache ich falsch?

InformationsquelleAutor tldr | 2015-04-09

javascript react-native

1

ListView enthält eine innere ScrollView so sollte es funktionieren. Auf dem simulator Ihre scrollen Sie durch klicken und ziehen der Maus.

Warum zeigen Sie nicht den vollständigen code, vielleicht ein paar screenshots?
- oh Mann, ich fühle mich wie ein idiot. Ich war nicht die Maus, nur nach unten scrollen. Ty!
- wow, ich auch--das ist die erste, die ich gelesen man muss die Maus nach unten ziehen, vielen Dank!!!
InformationsquelleAutor DiegoRBaquero
4

Ich hatte das gleiche Problem und festgestellt, dass die Listview mit den wrapper-Blick nach draußen machen ListView nicht Scrollbar ist.
Die Problemumgehung entfernen werden die wrapper View:
```
return (
    <ListView
      dataSource = {this.state.dataSource}
      renderRow = {this.renderRow.bind(this)}/>
)
```
- Ich war nicht die Maus, so war es kein problem mit der code - listview-Steuerelement funktioniert mit dem wrapper-Ansicht als auch für mich.
InformationsquelleAutor Hoang Pham Huu
4

Werde ich das hier posten trotz der OP bereits eine Lösung gefunden, b/c meine ListView würde nicht scrollen und es war nicht b/c ich versuche zu scrollen, anstatt mit der Maus zu simulieren durchziehen. Ich bin derzeit mit Reagieren-Native v0.1.7.

Es stellte sich heraus, dass der Grund meiner ListView würde nicht Blättern & nicht verraten, die anderen Zeilen, die nicht zunächst auf dem Bildschirm gerendert war, dass es nicht eine Feste Höhe. Gibt es eine Feste Höhe hat dieses Problem gelöst. Herauszufinden, wie, um zu bestimmen, was Wert für die Höhe war nicht eine einfache Sache, obwohl.

Neben der Listenansicht auf der Seite gab es auch ein Kopf an der Spitze der Seite, die hatte eine Feste Höhe. Ich wollte, dass die ListView zu nehmen, bis die Verbleibende Höhe. Hier, entweder meine Fähigkeit zu verwenden, die Reagieren Nativen begrenzte Umsetzung von FlexBox versagt mir oder der Umsetzung haben. Allerdings war ich nicht in der Lage, um die ListView zu füllen den verbleibenden Raum und in der Lage sein zu scrollen richtig.

Was ich Tat, war zu verlangen, die Abmessungen Paket const Dimensions = require('Dimensions'); und dann eine variable für das Fenster Gerät die Abmessungen const windowDims = Dimensions.get('window'); Einmal hatte ich das getan, ich war in der Lage, um zu bestimmen, die Höhe des verbleibenden Raum und anwenden, die auf inline-Stil der ListView: <ListView style={{height: windowDims.height - 125}} ... /> wo 125 war die Höhe der Kopfzeile.
- Diese Methode funktioniert für mich - ich habe mein ListView innerhalb einer View.
- Ich weiß nicht, ob es dieses problem lösen würde oder ob die Leute kommen auf der Suche auf diesen thread in der Zukunft, aber dies kann auch gelöst mit v0.22 Reagieren-Native: github.com/facebook/react-native/commit/...
- Dies ist immer noch ein Problem in 0.26.1 Reagieren-Native. Ich musste angeben, eine Höhe, um meine ListView zu scrollen.
InformationsquelleAutor flyingace
2

Wrap listview und andere Inhalte in der scroll-Ansicht.. Das löste mein scroll-Problem.
- Aber das scheint kaum wie es sein sollte, eine akzeptable Lösung, nicht wahr? Wenn ListView soll die Eigenschaften einer ScrollView, warum sollte das dann diese übergeordneten element Hinzugefügt werden müssen? Nicht zu sagen, das Plakat ist falsch, so zu tun, sondern vielmehr, warum ist dies nötig von RN?
- Obwohl die das ListView-Steuerelement über die Eigenschaften der ScrollView, wenn die Sache, die es enthält, nicht der Fall, dann wird es nicht scrollen. So ist diese Antwort die richtige ist, wenn Sie finden, Ihre ListView nicht scrollen.
InformationsquelleAutor Sandesh
2

Was für mich gearbeitet war die Folge dieser Antwort: https://stackoverflow.com/a/31500751/1164011

Im Grunde hatte ich
```
<View>
  <ListView/>
</View>
```
Wurde und was passiert ist, war, dass die <View> Komponente war immer eine Höhe von 0. So musste ich zu aktualisieren, um:
```
<View style={{ flex: 1 }}>
  <ListView/>
</View>
```
So <View> ruft seine Höhe auf der Grundlage der Inhalte.

InformationsquelleAutor tonatiuhnb

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.