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

どうも、とがみんです。

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

Contents [hide]

今回実装するもの
実装手順
- プロジェクトの作成
- FlatListを用いてテーブルの作成
FlatListについて
まとめ
参考

今回実装するもの

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

【React Native】
FlatListでテーブルの作成 pic.twitter.com/HbX1zZA3pz
— とがみん@プログラミング (@fresopiya) March 8, 2020

実装手順

プロジェクトの作成

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

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

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

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

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

	import React from 'react';
	import TableScreen from './screen/TableScreen.js';
	
	export default function App() {
  return <TableScreen/>
 }

import React from 'react';

import TableScreen from './screen/TableScreen.js';

export default function App() {

return <TableScreen/>

}

 import React from 'react';
	import {SafeAreaView, StyleSheet, Text, View, FlatList, TouchableHighlight } from 'react-native';
	
	const pokeData = [
  {id:"0",name:"フシギダネ"},
  {id:"1",name:"フシギソウ"},
  {id:"2",name:"フシギバナ"},
  {id:"3",name:"ヒトカゲ"},
  {id:"4",name:"リザード"},
  {id:"5",name:"リザードン"},
  {id:"6",name:"ゼニガメ"},
  {id:"7",name:"カメール"},
  {id:"8",name:"カメックス"}
 ]
 
 export default function TableScreen() {
  return(
    <SafeAreaView style = {styles.container}>
      <FlatList
        data = {pokeData}
        renderItem = {({item}) => (
          <TouchableHighlight
            onPress={() => console.log("pushed")}
            underlayColor={'red'} 
          >
            <View style = {styles.listItem}>
              <Text style = {styles.listTitle}>{item.name}</Text>
            </View>
          </TouchableHighlight>
        )} 
        keyExtractor={pokeData => pokeData.id}
      />
    </SafeAreaView>
  );
 }
 
 //スタイルシート
 const styles = StyleSheet.create({
  container:{
    width:'100%',
    flex:1,
  },
  listItem:{
    padding:18,
    borderBottomWidth:1,
    borderBottomColor:'#ddd',
    backgroundColor:'#fff',
  },
  listTitle:{
    fontSize:18,
  }
 });