getItemLayout
GPT-4.icon
getItemLayoutは、React NativeのFlatListやSectionListなどのリストコンポーネントにおけるオプションの最適化手法です。
この関数を使用することで、アイテムの動的なサイズ測定をスキップし、リストのパフォーマンスを向上させることができます。
特に、固定サイズのアイテムを持つリストの場合に有効です。
code:ts
getItemLayout={(data, index) => (
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}
引数
data
リストのデータ配列
index
現在のアイテムのインデックス
戻り値
length
アイテムの長さ（高さまたは幅）
offset
アイテムのオフセット（リストの先頭からの距離）
index
現在のアイテムのインデックス
例
固定サイズのアイテム（高さITEM_HEIGHT）を持つリストの場合：
code:ts
const 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の場合：
code:ts
const 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の実装は非常にシンプルです。