アプリでよく見るUIの一つにリストがある。

ショッピングアプリの商品リストや、ニュースアプリの記事リストなどがそれにあたる。

React Nativeでリスト形式のビューを表示する場合、FlatListコンポーネントを利用する。

FlatListコンポーネントのインポート

まずはコンポーネントのインポートから。
リスト表示の際に使うTextコンポーネントも合わせてインポートしておく。

import React, { Component } from 'react';
import { View, Text, FlatList } from 'react-native';

リストに表示するデータ配列の用意

FlatListを使用する場合、あらかじめ表示するデータ配列を定義しておく必要がある。

import React, { Component } from 'react';
import { View, Text, FlatList } from 'react-native';

export default class App extends Component {
  render() {
    const data = [
      {str: 'Yamada Taro', key: 'Taro'},
      {str: 'Tanaka Jiro', key: 'Jiro'},
      {str: 'Suzuki Saburo', key: 'Saburo'},
    ];
  }
}

リスト表示の際にキーを設定しないと警告が表示されるので、ここでkeyを必ず設定しておく。
今回は「名前」をキーとして設定したが、連番でもなんでも良い。

リストの表示

リストの表示はFlatListコンポーネントのdata属性にリスト配列を指定し、renderItem属性に処理の内容を記述する。

import React, { Component } from 'react';
import { View, Text, FlatList } from 'react-native';

export default class App extends Component {
  render() {
    const data = [
      {str: 'Yamada Taro', key: 'Taro'},
      {str: 'Tanaka Jiro', key: 'Jiro'},
      {str: 'Suzuki Saburo', key: 'Saburo'},
    ];

    return (
      <View style={{paddingTop:50, paddingLeft:50}}>
        <FlatList
          data={data}
          renderItem={({item}) => {
            return <Text key={item.key} style={{marginBottom:10}}>{item.str}</Text>
          }}
        />
      </View>
    );
  }
}

renderItemのreturnにはコンポーネントを書くことが可能で、今回はTextコンポーネントを使ってdata配列のstrを文字列として表示させている。

アプリを実行すると、上図のとおり表示されるはずだ。