初期の DataSource を取得する ListView があります。その後、ユーザーは検索を実行して、ListView を新しい DataSource で更新できます。残念ながら、これが発生すると、スクロール位置がリセットされますが、これは理想的ではありません。
新しいものを作成する代わりに、同じ ListView.DataSource オブジェクトを再利用しようとしましたが、同じ結果が得られました。
...
dataSource: new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
}),
componentWillReceiveProps(nextProps) {
this.setState({
dataSource: this.dataSource.cloneWithRowsAndSections({...});
}
...
dataSource が変更された後、ListView で scrollTo を使用しようとしましたが、この場合、アプリは頻繁にジャンプします...良い経験ではありません。ListView の設定や、スクロール位置がリセットされないようにする dataSource を更新する別の方法はありますか?
ListView には 2 つの固定ヘッダーがあり、上部のヘッダーには 2 行のページの説明と、3 つの画像グリッドをレンダリングする redux コンテナーがあります。2 番目のセクションは、レンダリングがやや重い最大 50 個のコンポーネントのリストです: 正方形の画像、いくつかのテキスト、およびいくつかの SVG。私の現在の方法は、onContentSizeChange を使用してスクロール位置を強制的に動作させますが、これはスクロール位置のジャンプを引き起こし、アマチュアに見えます。
更新: ListView のドキュメントとソース コードを掘り下げると、最終的には ScrollView をレンダリングするだけです。contentOffsetを使用して初期スクロール位置を設定できますが、ListView DataSource が更新されたときに役に立たないようです。contentOffset をハードコーディングしても役に立ちません。また、 scrollEnabledを false に設定してみました。これにより、実際にユーザー主導のスクロールが妨げられましたが、DataSource が更新されたときに ListView のスクロール位置がリセットされます:s
更新 2:さらにデバッグを行ったところ、提案された rowHasChange および sectionHeaderHasChanged 関数が、レンダリングが必要な行/セクション ヘッダーのみをレンダリングするというかなり良い仕事をすることがわかりました。