Flatlist getItemLayoutユースケース
フラットリストでgetItemLayoutを使用する理由、フラットリストのパフォーマンスを改善する方法.
getItemLayout={(data, index) => (
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}
ここでオフセットとは何ですか？
React Native FlatListは、現在画面に表示されている行のみをレンダリングし、過去にスクロールされた行をアンマウントすることにより、リストビューのパフォーマンスを最適化します。
FlatListがこれを実行できるようにするには、現在表示されているビューポートの上の行の合計の高さを知る必要があるため、基になるScrollViewスクロール位置を正しく設定できます。
FlatListでこれを実現するには2つの方法があります。どちらか、
- 行がマウントされた後、行の高さを計算できます。または
- 行の高さを予想できます。
前者の場合、次の行の位置を計算できるようになるまで、前の行に必要なレイアウト、レンダリング、マウント、および測定を完全に行う必要があります。
後者では、事前に位置を事前計算し、動的な測定コストを回避できます。
getItemLayoutコールバックの3つの引数は次のとおりです。
length：個々の行の高さ。高さは異なる場合がありますが、高さは静的でなければなりません。最適化は、高さが一定の場合に最適に機能します。offset：FlatListの上部から現在の行までの距離（ピクセル単位）。一定の高さの行に対してこれを計算する最も簡単な方法は、height * index。前の行の直後の位置を生成します。index：現在の行インデックス。
FlatListが水平の場合、各列はリスト行のリストとして扱われ、列幅は行の高さと同じです。