2016-02-12 11 views
6

onTopReachedイベントでReact NativeのListViewにアイテムを追加することは可能ですか?onEndReachedイベントで項目を追加する方法と似ていますか?現在、リストに行を追加すると、ListViewが上にスクロールします。React Native ListView:アイテムの前に接頭辞

ユースケース:私はユーザーが下にスクロールできるフィードをアプリに持っています。フィードから離れて戻ってきたら、最後に見た行を一番上に表示したい。ユーザーはスクロールした前の行が上をスクロールして新しい行をロードすることができるはずです。私はすでにレンダリングされた最後に、リストの最初の部分を付加しています上記の例では

_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) 
    }); 
    }, 

:私はすでに次のようになり、最後の行から見て不自然な例を開始するリストビューをレンダリングしてきたと仮定すると、私がすでにトップにいるので、すぐに発砲するのは_onTopReachedです。ただし、これにより、ListViewは前の位置を維持するのではなく、画面の先頭にある最初の行で再レンダリングされます。

代わりに最後に見た行のオフセットをyに格納し、その位置へのListViewスクロールに戻ります。しかし、そのメソッドは現在のレンダリングに時間がかかる前にすべての行を必要とします。私はまたscrollWithoutAnimationToまたはcontentOffSetを設定することで正しいオフセットを得ることができませんでした。ただし、scrollToを使用する場合は正しい位置にスクロールし、scrollWithoutAnimationToを呼び出す前にタイムアウトを設定して、最初の行を平均時間内にレンダリングできるようにします。しかしそれはあまりいいことではありません。

すべてのご協力をいただければ幸いです。ありがとう!

+0

私はネイティブ反応が大好きですが、リストビュー私はまた、このようにうまく動作するように(かなり)単純なものを得ることは本当に難しいと思っている..幸運! –

+0

ベン。ありがとう。 ListViewは私にとっても非常に不満の源です。 –

+0

ねえ、今までこれを理解できましたか?私は適切な位置にスクロールするためにそれを得ることができましたが、それは瞬時に新しいコンテンツを示しています。 – chapinkapa

答えて

0

あなたは、データソースに新しいアイテムを追加してみてくださいと「scrolltoindex」メソッドを使用しFlatList

を使用する必要があります。

FlatList

scrollToIndex(paramsは:オブジェクト)は、それが上部になるようにビュー位置0の場所を、1底部の表示可能領域内に位置するように指定されたインデックスの項目に スクロール、中央は0.5である。 viewOffsetは、最終目標位置をオフセットする固定ピクセル数です。