Reactive Native ListView: Artikel voranstellen

Question

Ist es möglich, Elemente zu React Native's ListView auf einem onTopReached Ereignis ähnlich der Art, wie man Elemente an einem onEndReached Ereignis anfügt, voranzustellen? Derzeit, wenn ich Zeilen der Liste vorstelle, scrollt der ListView nach oben.

Der Anwendungsfall: Ich habe eine App mit einem Feed kann der Benutzer nach unten scrollen. Wenn ich vom Feed weg und wieder zurück gehe, möchte ich die zuletzt gesehene Zeile oben anzeigen. Der Benutzer sollte dann in der Lage sein, entweder nach oben zu scrollen, um die vorherigen Zeilen zu sehen, an denen er gescrollt hat, und natürlich nach unten, um neue Zeilen zu laden. Angenommen, ich habe bereits das Listview ausgehend von der zuletzt Reihe ein konstruiertes Beispiel so etwas wie dies aussehen würde gemacht:

_onTopReached() { 
    this._unshiftRows(); 
    }, 

    _unshiftRows() { 
    var list = this.props.list; // The entire list 
    var lastSeenRowIndex = this.props.lastSeenRowIndex; 
    var prevRows = list.slice(0, i); 
    this._rows = prevRows.concat(this._rows); 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(this._rows) 
    }); 
    }, 

Im Beispiel oben Ich bin nur das Voranstellen von dem ersten Teil der Liste des bereits erbringen letzten Teil mit _onTopReached feuern sofort, weil ich schon an der Spitze bin. Dies führt jedoch dazu, dass das ListView mit der ersten Zeile am oberen Bildschirmrand erneut rendert, anstatt die vorherige Position beizubehalten.

Eine Alternative besteht darin, den y Offset der zuletzt gesehenen Zeile zu speichern und bei der Rückkehr zum ListView zu dieser Position zu blättern. Diese Methode erfordert jedoch, dass jede Zeile vor der aktuellen rendert, was zeitaufwendig ist. Ich war auch nicht in der Lage, den richtigen Offset mit scrollWithoutAnimationTo oder durch Einstellung contentOffSet zu bekommen. Es scrollt jedoch zur korrekten Position, wenn ich scrollTo benutze oder ein Zeitlimit vor dem Anruf scrollWithoutAnimationTo einstelle und erlaube, dass die ersten Reihen in der Zwischenzeit rendern. Aber das ist nicht sehr nett.

Alle Hilfe würde sehr geschätzt werden. Vielen Dank!

Answer 1

sollten Sie FlatList verwenden

Versuchen Sie, die neuen Elemente in die Datenquelle hinzufügen und verwenden Sie die ‚scrollToIndex‘ -Methode.

FlatList

scrollToIndex (params: object) Scrolls zu dem Element am angegebenen Index derart, dass sie in den sichtbaren Bereich, so dass viewPosition 0 legt sie an der Spitze, 1 an der Unterseite positioniert ist, und 0,5 in der Mitte zentriert. viewOffset ist eine feste Anzahl von Pixeln zum Versetzen der endgültigen Zielposition.