私はチャットアプリを構築していますが、React-Nativeバージョン以降、 Android0.63の反転フラットリストに長いテキストが含まれていると、パフォーマンスが低下します。
これは、問題を示すスナックの再現です (物理的な Android フォンで試した場合にのみ表示されます) 。
バグを報告しました。反転された Flatlist を使用してチャット アプリを構築している人にとっては、かなり重大な問題であるはずですが、どういうわけか、この問題についてどこにも言及されていません。
これは、他の人が何とか解決したのではないかと思いましたか？はいの場合、どうすれば解決できますか？現在、私のアプリはほとんど使用できません。
実際、このFlatlistコンポーネントは、 のような他のリスト コンポーネントよりもパフォーマンスが向上するように、より優れた方法で記述されていますScrollView。ただし、チャットのような非常に長いリストにはいくつかの原則があることを考慮する必要があります。
Unique Key : 一意のキーをキャッシュして並べ替えるには、一意のキーを渡すのが最善の方法です。一意のキーReactJSを使用するだけitem.keyであり、それが存在しない場合はReactJS使用indexし、それがパフォーマンスの問題の原因であるSOを使用する必要があります。 name という小道具を使用し、keyExtractor一意のキーを生成するための適切な関数を作成します。
動的コンテンツの測定をスキップする: 再レンダリングのたびにアイテムの測定値を再計算するのを避けるために、名前が であるプロップを使用して、、、などを渡すgetItemLayoutことができます。いくつかのアイテムを含むリスト。widthheightoffsetindexgetItemLayout
最初のアイテムの数を決定する: ロードするアイテムの数を決定し、表示されたアイテムを表示しないようにすることができます。これは少し難しいかもしれませんが、使用initialNumToRenderすると初期ロードに役立つと思います。ビュー画面にはありません。
クリップされたアイテムを削除: このために、その名前removeClippedSubviewsが気にするプロップ名を使用できます。状況によってはバグがあるかもしれません。
私の経験では、これらの方法で長いリストのパフォーマンスを向上させることができます。これらがお役に立てば幸いです。パフォーマンスを向上させるためのトリックが他にもあるかもしれません。