Zenn
🍣

FlatList（ReactNative）の使い方について、まとめてみた

2025/01/19に公開
React Native
tech

はじめに

今回、React NativeのFlatListの使い方について、まとめていきます。

配列データを渡すことで、自動的にリストのアイテムを生成します。

import React from "react";
import { View, Text, FlatList, StyleSheet } from "react-native";

export default function App() {
  const data = [
    { id: "1", name: "Item 1" },
    { id: "2", name: "Item 2" },
    { id: "3", name: "Item 3" },
  ];

  return (
    <View style={styles.container}>
      <FlatList
        data={data} // 表示するデータ
        keyExtractor={(item) => item.id} // 各アイテムのユニークなキー
        renderItem={({ item }) => ( // 各アイテムの描画方法
          <Text style={styles.item}>{item.name}</Text>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 16,
  },
  item: {
    fontSize: 18,
    marginVertical: 8,
  },
});

構成部分の説明

data(必須)

レンダリングする項目の配列 (または配列のようなリスト)

keyExtractor

・各アイテムに一意のキーを設定します。
・これにより、React がリストの再描画時にパフォーマンスを最適化できます。

renderItem(必須)

renderItemはリストの各アイテムをどのように描画するかを指定する関数です。この関数に渡される引数は次のようなプロパティを含みます:
item,index,separatorsを含みます。

1.itemについて
・現在描画中のリストのデータです。
・FlatListに渡したdata配列の１つの要素がこのitemに渡されます。

data = [
  { id: "1", name: "Item 1" },
  { id: "2", name: "Item 2" },
];

2.indexについて
列内のこの項目に対応するインデックスです

3.separatorsについて
separators は React Native の FlatList における renderItem 関数の引数として提供されるオブジェクトの一部で、各アイテムの表示状態に応じてカスタムの視覚効果を追加するために使用されます。

import React from "react";
import { FlatList, Text, View, StyleSheet, TouchableHighlight } from "react-native";

export default function App() {
  const data = [
    { id: 1, title: "Item 1" },
    { id: 2, title: "Item 2" },
    { id: 3, title: "Item 3" },
    { id: 4, title: "Item 4" },
  ];

  const handlePress = (item) => {
    alert(`You pressed ${item.title}`);
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item, separators }) => (
          <TouchableHighlight
            onPress={() => handlePress(item)}
            onShowUnderlay={separators.highlight} // タッチ時に強調表示を適用
            onHideUnderlay={separators.unhighlight} // タッチ解除時に強調解除
            underlayColor="#dddddd"
          >
            <View style={styles.item}>
              <Text style={styles.text}>{item.title}</Text>
            </View>
          </TouchableHighlight>
        )}
        ItemSeparatorComponent={() => <View style={styles.separator} />}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: "#fff",
  },
  item: {
    padding: 16,
    backgroundColor: "#f0f0f0",
    alignItems: "center",
    borderRadius: 4,
    marginBottom: 8,
  },
  text: {
    fontSize: 16,
    fontWeight: "bold",
  },
  separator: {
    height: 1,
    backgroundColor: "#ccc",
    marginVertical: 4,
  },
});

highlight と unhighlight

onShowUnderlay プロパティで separators.highlight を呼び出すことで、タッチ時に強調表示が適用されます。
onHideUnderlay プロパティで separators.unhighlight を呼び出すことで、タッチ解除時に強調表示が解除されます。
カスタムの強調表示 highlight や unhighlight は、各アイテムのセパレーターのスタイルに応じて動的な視覚効果を提供します。

2列に表示したい場合

グリッド表示したい場合、numColumnsを使用して、列数を表示します。

import React from "react";
import { FlatList, Text, View, StyleSheet } from "react-native";

export default function App() {
  const data = [
    { id: 1, name: "Item 1" },
    { id: 2, name: "Item 2" },
    { id: 3, name: "Item 3" },
    { id: 4, name: "Item 4" },
  ];

  return (
    <View style={styles.container}>
      <FlatList
        data={data} // データを指定
        numColumns={2} // 列数を指定（2列）
        keyExtractor={(item) => item.id.toString()} // 一意のキーを指定
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text style={styles.text}>{item.name}</Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: "#fff",
  },
  item: {
    flex: 1, // 列内で均等にサイズを割り当て
    margin: 8,
    padding: 16,
    backgroundColor: "#f0f0f0",
    alignItems: "center",
    borderRadius: 4,
  },
  text: {
    fontSize: 16,
    fontWeight: "bold",
  },
});


numColumns={2} // 列数を指定（2列）

例では、２列で指定しています。

公式ドキュメント

https://reactnative.dev/docs/flatlist

まとめ

今回、ReactNativeのFlatListについて、まとめてみました。
これからも、Reactに関して、学んだことを発信していきたいです。

Discussion