web-dev-qa-db-de.com

Wie füge ich ein Element zu ListView hinzu / lösche es?

Wir können eine Datenquelle für ListView wie diese erstellen

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});  
var dataSource =  ds.cloneWithRows(['row 1', 'row 2']), };

Wie kann ich das tun, wenn ich Elemente hinzufügen oder Elemente aus der Datenquelle löschen möchte? Muss ich cloneWithRows immer mit aktualisiertem Array aufrufen?

30
thecodejack

Ja, rufe cloneWithRows(...) auf

Die React Native documentation deckt das ListViewDataSource -Objekt nicht ab, daher kann es hilfreich sein, die Kommentare im Quellcode zu lesen zu lesen wie das geht.

Einige Hinweise, die hilfreich sein können:

  • cloneWithRows(data) ist ein bisschen irreführend benannt, weil nicht nur ein Klon der Daten erstellt wird, wie der Name vermuten lässt.
  • Stattdessen wird versucht, die neuen Zeilen data mit den vorhandenen Zeilen (falls vorhanden) in der dataSource zu vergleichen und herauszufinden, ob neue Zeilen einzufügen sind oder ob vorhandene Zeilen ersetzt oder entfernt werden müssen.

  • In den Quellcodekommentaren wird darauf hingewiesen, dass die Daten in der Datenquelle von Entwurf her unveränderlich sind. Daher müssen Sie zum Ändern der Datenquelle eine aktualisierte Datenquelle angeben, d. H. cloneWithRows(...) aufrufen.

Es mag uninteressant erscheinen, die gesamte Liste zu durchlaufen, nur um ein paar Zeilen zu ändern, aber es gibt einige Gründe, warum dies sinnvoll ist:

  • Erstens passt es zu Reacts allgemeiner flussbasierter Architektur , bei der der Fokus auf dem Setzen von Zuständen und dem Ermöglichen, dass Komponenten herausfinden, wie sie sich mutieren, um den neuen Zustand widerzuspiegeln, liegt (denken Sie daran, wie this.props oder this.state funktioniert). Sie können das Datenarray außerhalb der Komponente ListView beliebig ändern. Wenn Sie jedoch bereit sind, die Komponente zu aktualisieren, müssen Sie den gesamten Status an die Komponente übergeben, damit diese sich selbst aktualisieren kann.

  • Zweitens ist es anständig effizient. Die ListView führt die starke Zeilendifferenzierung in Javascript durch , bevor der Rendervorgang gestartet wird, und rendert dann jeweils eine Zeile (Sie können Passen Sie dies an ) während des Rendervorgangs an, um Bildausfälle zu reduzieren.

  • Drittens steht hier nichts der Möglichkeit entgegen, Methoden wie .addRow(..) in Zukunft zu unterstützen. Der Punkt ist, dass die aktuelle Implementierung kein schlechter Start ist, da sie eine zustandsbasierte Schnittstelle bietet, mit der Entwickler sich keine Gedanken darüber machen können, wie die Listenkomponente zwischen Zuständen mutiert.

64
tohster

Wenn Sie sich das Beispiel für erweiterte Filme aus dem React Native Tutorial ansehen, wird eine Suche implementiert, die neue Filme von einer Remote-API abruft. Das bedeutet, dass bei jeder Suche der Datenspeicher aktualisiert und Elemente hinzugefügt oder entfernt werden Der genaue Ort, an dem dies geschieht, ist hier:

getDataSource: function(movies: Array<any>): ListView.DataSource {
    return this.state.dataSource.cloneWithRows(movies);
}

https://github.com/facebook/react-native/blob/master/Examples/Movies/SearchScreen.js#L209

Es sieht also so aus, als wäre Ihr Weg die empfohlene Methode.

8
Colin Ramsay