【ReactNative】FlatListの基本の使い方

基本形

dataにリストを渡します。 renderItemは表示する各アイテムのReactコンポーネントを指定します。Viewとか、Imageとか。
引数itemからdataに渡した情報を取得できます。
keyExtractorはidなど一意になるような文字列を指定します。

const [itemList, setItemList] = React.useState([{id: 1}, {id:2}, {id:3}]);

<FlatList
    data={itemList}
    renderItem={({ item, index, separators }) => (
        <Text>アイテム</Text>
    )}
    keyExtractor={(item) => item.id}
></FlatList>

スクロール読み込み

下の方にスクロールしていくと次のデータを読む動作ができます。
具体的にはリストの最後尾に到達したら、onEndReachedが発動します。
当然サーバー側との連携が必要になります。

Thresholdはスクロールしていって最後尾のどれくらい手前でonEndReachedを発動するかを指定します。最後のアイテムの何割の長さかを割合で指定します。0.5なら最後尾のアイテムが残り半分になったときに発動します。0なら全部表示し切るまで発動されません。
これによって次のデータを読み込むタイミングを調整できます。

const [cursor, setCursor] = React.useState(null);

<FlatList ....
  onEndReachedThreshold={0.5}
  onEndReached={onEndReached}

リフレッシュ

これはよくある「下に引っ張ったらデータが更新される機能」を追加してくれます。

const [refreshing, setRefreshing] = React.useState(false);

<FlatList ....
 refreshing={refreshing}
 onRefresh={async () => {
    setRefreshing(true);
    // データ取得
    setRefreshing(false);
  }}

ScrollViewのプロパティを使っても出来るみたいです。

refreshControl={
  <RefreshControl refreshing={refreshing} onRefresh={() => console.log('データ取得'} />
}

読込中

リストのフッター部を利用してインジケーターを表示します。下の方にスクロールして行ったときに表示されます。

const [loading, setLoading] = React.useState(false);

ListFooterComponent={
  loading ? (
    <View style={styles.loading}>
      <ActivityIndicator size="small" />
    </View>
  ) : null

リストがない場合

データが空のときに表示したい内容を指定します。

ListEmptyComponent={
  <View>
    <Text style={{ fontSize: 16, padding: 32 }}>
      該当するアイテムがありません
    </Text>
  </View>
}

複数の列

画像のサムネイルなど、一行に複数列表示したい場合。

<FlatList ....
    numColumns={3}

まとめ

最低限必要なのはこんなもんでしょうか。なんかありますかね。

reactnative.dev