React NativeのFlatListコンポーネントとは？基本から使い方まで徹底解説

React Nativeアプリ開発において、リスト形式のデータを表示する場面は非常に多くあります。そんなときに活躍するのがFlatListコンポーネントです。FlatListは、リスト項目を読み込んで表示するためのコンテナであり、ヘッダー・フッターのサポート、複数カラム対応、縦横両方向のスクロール、遅延読み込み（Lazy Loading）など、多彩な機能を備えています。

FlatListの主な特徴

FlatListには、以下のような重要な特徴があります。

• スクロールに合わせた読み込み（Scroll Loading）に対応
• scrollToIndexサポートにより、指定位置へのスクロール調整が可能
• ヘッダーとフッターの表示に対応
• 複数カラム（Multi Column）レイアウトに対応
• iOS・Android両方で動作するクロスプラットフォーム設計
• 表示領域の変化を検知できる設定可能なViewabilityコールバック

FlatListの基本構造

FlatListの基本的な構造は以下の通りです。

<FlatList
  data={DataContainer}
  renderItem={yourRenderItem}
  keyExtractor={item => item.id}
/>

FlatListの仕組み

FlatListは、VirtualizedListコンポーネントをもとに実装されています。VirtualizedListは、モバイル画面の現在のビューポートに収まる限られた数のアイテムだけを表示し、残りのデータはユーザーがスクロールするのに応じて描画します。これにより、大量のデータを扱う場合でも高いパフォーマンスを維持できます。

最低限、dataとrenderItemという2つのpropsを使えばFlatListを作成できます。

FlatListのインポート方法

FlatListを使用するには、react-nativeから次のようにインポートします。

import { FlatList } from "react-native";

FlatListの主要なProps一覧

separators.highlight(),
separators.unhighlight(),
separators.updateProps().

例1：FlatListのアイテムを縦方向に表示する

まずは、最も一般的な縦方向のリスト表示の例を見ていきましょう。FlatListとあわせて、Text、View、StyleSheetなどのコンポーネントもインポートします。

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

次に、FlatListに表示するデータを用意します。ここでは、this.state.dataにフレームワーク名のリストを格納しています。

this.state = {
  data: [
    { name: "Javascript Frameworks", isTitle: true },
    { name: "Angular", isTitle: false },
    { name: "ReactJS", isTitle: false },
    { name: "VueJS", isTitle: false },
    { name: "ReactNative", isTitle: false },
    { name: "PHP Frameworks", isTitle: true },
    { name: "Laravel", isTitle: false },
    { name: "CodeIgniter", isTitle: false },
    { name: "CakePHP", isTitle: false },
    { name: "Symfony", isTitle: false }
  ],
  stickyHeaderIndices: []
};

renderItem関数の実装

renderItemは、渡されたアイテムを受け取り、Textコンポーネントとして表示する役割を担います。

renderItem = ({ item }) => {
  return (
    <View style={styles.item}>
      <Text style={{ fontWeight: (item.isTitle) ? "bold" : "", color: (item.isTitle) ? "red" : "gray" }}>{item.name}</Text>
    </View>
  );
};

この例では、TextコンポーネントをViewコンポーネントでラップしています。item.isTitleがtrueかfalseかを判定し、trueの場合は太字＋赤色、falseの場合はグレー色で表示するようにしています。これにより、カテゴリ見出しと通常項目を視覚的に区別できます。

FlatListの実装

続いて、dataとrenderItemのpropsを持つFlatListを実装します。

<View style={styles.container}>
  <FlatList data={this.state.data} renderItem={this.renderItem} keyExtractor={item => item.name} />
</View>

this.state.dataをdata propsに渡し、this.renderItem関数をrenderItem propsに代入しています。

keyExtractorには、データ配列内でユニークになるプロパティを指定します。これを省略した場合、配列のインデックスがデフォルトのキー値として使用されます。今回はnameがユニークであるため、以下のように指定しています。

keyExtractor={item => item.name}

完全なサンプルコード

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

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [
        { name: "Javascript Frameworks", isTitle: true },
        { name: "Angular", isTitle: false },
        { name: "ReactJS", isTitle: false },
        { name: "VueJS", isTitle: false },
        { name: "ReactNative", isTitle: false },
        { name: "PHP Frameworks", isTitle: true },
        { name: "Laravel", isTitle: false },
        { name: "CodeIgniter", isTitle: false },
        { name: "CakePHP", isTitle: false },
        { name: "Symfony", isTitle: false }
      ],
      stickyHeaderIndices: []
    };
  }

  renderItem = ({ item }) => {
    return (
      <View style={styles.item}>
        <Text style={{ fontWeight: (item.isTitle) ? "bold" : "", color: (item.isTitle) ? "red" : "gray" }}>{item.name}</Text>
      </View>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <FlatList data={this.state.data} renderItem={this.renderItem} keyExtractor={item => item.name} stickyHeaderIndices={this.state.stickyHeaderIndices} />
      </View>
    );
  }
} 

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    margin: 10,
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  }
});

実行結果

上記のコードを実行すると、JavaScriptフレームワークとPHPフレームワークのカテゴリ見出しが赤色の太字で表示され、その下に各フレームワーク名がグレー色で縦方向にリスト表示されます。

例2：FlatListのアイテムを横方向に表示する

FlatListのアイテムを横方向に表示したい場合は、horizontal={true}というpropsを追加するだけです。それ以外のコード構造は縦表示の場合とほぼ同じです。

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

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [
        { name: "Javascript Frameworks", isTitle: true },
        { name: "Angular", isTitle: false },
        { name: "ReactJS", isTitle: false },
        { name: "VueJS", isTitle: false },
        { name: "ReactNative", isTitle: false },
        { name: "PHP Frameworks", isTitle: true },
        { name: "Laravel", isTitle: false },
        { name: "CodeIgniter", isTitle: false },
        { name: "CakePHP", isTitle: false },
        { name: "Symfony", isTitle: false }
      ],
      stickyHeaderIndices: []
    };
  }

  renderItem = ({ item }) => {
    return (
      <View style={styles.item}>
        <Text style={{ fontWeight: (item.isTitle) ? "bold" : "", color: (item.isTitle) ? "red" : "gray" }}>{item.name}</Text>
      </View>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <FlatList horizontal={true} data={this.state.data} renderItem={this.renderItem} keyExtractor={item => item.name} stickyHeaderIndices={this.state.stickyHeaderIndices} />
      </View>
    );
  }
} 

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 100,
  },
  item: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 30,
    margin: 2,
    borderColor: '#2a4944',
    borderWidth: 1,
    height: 100,
    backgroundColor: '#d2f7f1'
  }
});

実行結果

このコードでは、各アイテムに背景色やボーダーを設定しているため、横方向にスワイプできるカード風のリストが表示されます。horizontal propsを1行追加するだけで、縦方向のリストが簡単に横スクロール型のカルーセル表示に変わることがわかります。

まとめ

FlatListは、React Nativeでリストを効率的に表示するための標準的なコンポーネントです。VirtualizedListベースの遅延読み込みによって大量のデータでもパフォーマンスを維持でき、dataとrenderItemの2つの必須propsだけで手軽に実装できるのが魅力です。さらに、horizontal propsによる横方向表示、ヘッダー・フッターのカスタマイズなども柔軟に行えます。ぜひ実際のアプリ開発で活用してみてください。