FlashList 超入門マニュアル

以下、私のアプリ開発中に、学習した内容をまとめ、Geminiに出力させた、Flashlistの使い方です。自己の備忘録なので悪しからず。

FlashList 超入門マニュアル: 初心者でも大丈夫！ (アイテムサイズがわからない場合も対応)

React Native で長いリストを表示する際に、パフォーマンスを最適化してくれるのが FlashList です。大量のデータや複雑なアイテムを扱う場合でも、サクサク動くリストを作ることができます。

FlashList ってどんな時に使うの？

• たくさんのデータを表示するリスト (例: 商品一覧、友達リスト、チャット履歴)
• 画像やテキストなど、複数の要素を含む複雑なアイテムを表示するリスト
• スムーズなスクロールを実現したいリスト

基本的な使い方:

FlashList を使うには、まず必要なコンポーネントをインポートします。

import { FlashList } from "@shopify/flash-list";

次に、FlashList コンポーネントを配置し、必要なプロパティを設定します。

<FlashList
  data={dataArray} 
  renderItem={renderItem} 
  estimatedItemSize={itemSize} 
  keyExtractor={(item) => item.id} 
/>

プロパティの説明:

• data: リストに表示するデータの配列です。必須です。
• renderItem: 各アイテムをどのように表示するかを定義する関数です。必須です。
• estimatedItemSize: 各アイテムのおおよそのサイズを指定します。アイテムのサイズが事前にわからない場合や、サイズが異なる場合に設定します。
• keyExtractor: 各アイテムに一意のキーを割り当てる関数です。必須です。

renderItem 関数の書き方:

renderItem 関数は、リストの各アイテムをどのように表示するかを定義します。この関数は、{ item, index } というオブジェクトを受け取ります。

• item: 現在表示しようとしているアイテムのデータです。
• index: 現在表示しようとしているアイテムのインデックス (順番) です。

例えば、アイテムに title というプロパティがある場合、以下のように renderItem 関数を定義できます。

const renderItem = ({ item }: { item: any }) => (
  <View>
    <Text>{item.title}</Text>
  </View>
);

keyExtractor 関数の書き方:

keyExtractor 関数は、各アイテムに一意のキーを割り当てます。キーは、リストのアイテムを識別するために使用されます。

例えば、アイテムに id というプロパティがある場合、以下のように keyExtractor 関数を定義できます。

keyExtractor={(item) => item.id} 

アイテムのサイズが事前にわからない場合:

アイテムのサイズが事前にわからない場合は、以下の方法で対処できます。

1. estimatedItemSize プロパティを使う:

estimatedItemSize プロパティに、アイテムのおおよそのサイズを指定します。FlashList は、この値を元にリストの初期表示を最適化します。

<FlashList
  // ...
  estimatedItemSize={100} // 例: アイテムの高さを 100 と推定
/>

2. onLayout イベントでアイテムのサイズを取得する:

各アイテムの onLayout イベントで、実際にレンダリングされたアイテムのサイズを取得し、状態変数に保存することもできます。

const Item = ({ item }: { item: any }) => {
  const [itemHeight, setItemHeight] = useState(0);

  const handleLayout = (event) => {
    const { height } = event.nativeEvent.layout;
    setItemHeight(height);
  };

  return (
    <View style={styles.item} onLayout={handleLayout}>
      {/* アイテムの内容 */}
    </View>
  );
};

ただし、アイテムのサイズが動的に変化する場合は、この方法はあまり効果的ではありません。

3. FlatList の initialNumToRender プロパティを調整する (FlashListではなくFlatListの場合):

FlatList では、initialNumToRender プロパティで、最初にレンダリングするアイテムの数を指定できます。この値を大きくすることで、初期表示時のパフォーマンスを向上させることができます。ただし、メモリ使用量が増加する可能性があるので注意が必要です。

4. 動的なアイテムサイズに対応したライブラリを使用する:

react-native-dynamic-list-view などのライブラリは、動的なアイテムサイズに対応したリストコンポーネントを提供しています。

どの方法を選ぶべき？

• アイテムのサイズがある程度予測できる場合は、estimatedItemSize を使うのが簡単です。
• アイテムのサイズが大きく異なる場合は、onLayout イベントでサイズを取得するか、動的なアイテムサイズに対応したライブラリを使うことを検討してください。
• FlatList を使う場合は、initialNumToRender プロパティを調整することで、初期表示時のパフォーマンスを向上させることができます。

まとめ:

FlashList は、React Native で長いリストを効率的に表示するための便利なコンポーネントです。アイテムのサイズが事前にわからない場合でも、適切な方法で対処することで、パフォーマンスを最適化することができます。

さらに詳しく知りたい方へ:

• FlashList 公式ドキュメント
• React Native 公式ドキュメント (FlatList) (FlashList は FlatList をベースに開発されています)

このマニュアルが、FlashList を使いこなすためのお役に立てれば幸いです。