Fresopiya
場所にもお金にも時間にも、何にも縛られない自由な状態になったら一体人間は何をしてどこに向かうのか。

まずはとにかく自由を目指すエンジニアのブログです。
「哲学」と「プログラミング」と「政治経済」、「ブログ」がメインになるかと。
React Native

【ReactNative】FlatListによるテーブルの実装方法

どうも、とがみんです。

この記事では、ReactNativeにて、FlatListをもちいたテーブルの実装方法についてまとめていきます。

今回実装するもの

今回は、以下のようなテーブルを実装します。
セルを選択すると、選択したセルの色が赤色に変わるシンプルなテーブルです。

実装手順

プロジェクトの作成

まずは、プロジェクトを作成します。
プロジェクトの作成方法については、以下の記事にまとめています。

FlatListを用いてテーブルの作成

今回テーブルを作成するにあたって、TableScreen.jsというファイルを新しく作成し、そのファイルにテーブルに関するコードを記述します。

それをApp.jsから読み込み実装していきます。

それぞれのファイルに記述しているコードを以下にまとめます。

上記のように、App.jsファイルとTableScreen.jsファイルを変更・作成し実行するとテーブルが表示されます。

FlatListについて

data = {pokeData}

FlatListのdataには、配列(array)型の表示するデータを渡します。今回は、プログラムの最初の方に定義しているpokeDataを渡しています。

renderItem = {({item})=>()}

renderItemには、描画するアイテムを記述します。
引数として渡されているitemには、dataに渡した各要素が渡されます。

今回の場合、1つ目のセルが描画される際には{id:”0″,name:”フシギダネ”}、2つ目のセルが描画される際には{id:”1″,name:”フシギソウ”}が渡されます。

keyExtractor={pokeData => pokeData.id}

keyExtractorには、データのユニークなキーを渡します。

今回は各データのユニークなキーとしてpokeData.idを渡しています。

このキーは、アイテムの並べかえを追跡するためのキーとして使用されます。

まとめ

シンプルなテーブルの実装方法についてまとめました。
サンプルコードは以下GitHubに上げているので、よければ参考にしてください。

https://github.com/togamin/tableSample

参考

>FlatList | React Native