getItemLayout
from FlatList
getItemLayout は、React Nativeの FlatList や SectionList などのリストコンポーネントにおけるオプションの最適化手法です。この関数を使用することで、アイテムの動的なサイズ測定をスキップし、リストのパフォーマンスを向上させることができます。
特に、固定サイズのアイテムを持つリストの場合に有効です。
tsgetItemLayout={(data, index) => (
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}引数
data
リストのデータ配列
index
現在のアイテムのインデックス
戻り値
length
アイテムの長さ（高さまたは幅）
offset
アイテムのオフセット（リストの先頭からの距離）
index
現在のアイテムのインデックス
例
固定サイズのアイテム（高さ
ITEM_HEIGHT ）を持つリストの場合：tsconst ITEM_HEIGHT = 50;
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={item => item.id}
getItemLayout={(data, index) => (
{ length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index }
)}
/>セパレーターを含む場合
もしアイテム間にセパレーター（区切り線）がある場合、その高さ（または幅）もオフセット計算に含める必要があります。
例えば、セパレーターの高さが
SEPARATOR_HEIGHT の場合：tsconst ITEM_HEIGHT = 50;
const SEPARATOR_HEIGHT = 10;
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={item => item.id}
ItemSeparatorComponent={ItemSeparator}
getItemLayout={(data, index) => (
{ length: ITEM_HEIGHT, offset: (ITEM_HEIGHT + SEPARATOR_HEIGHT) * index, index }
)}
/>## メリット
- **パフォーマンス向上**: 特に数百以上のアイテムを含むリストの場合に有効です。
getItemLayout を追加することで、各アイテムの動的なサイズ測定が不要になり、スクロールのスムーズさが向上します。- **シンプルな実装**: 固定サイズのアイテムの場合、
getItemLayout の実装は非常にシンプルです。