React Native基礎

FlatListコンポーネント

FlatListコンポーネント

リストビューは電話帳のように「1行に1データ」を表示する場合に便利です。
FlatListコンポーネントでは表示する内容をdataプロパティで渡します。渡すデータは「オブジェクトの配列」です。各データの描画方法をrenderItemプロパティで指定します（React要素を返す関数を渡します。返すReact要素をカスタマイズすることで表示方法を自由に設定できます）

const DATA = [
  {id: '1', title: 'テキスト1'},
  {id: '2', title: 'テキスト2'},
  {id: '3', title: 'テキスト3'}
];
class Contents extends React.Component {
  // renderItemにはオブジェクトが渡される。以下の例では分割代入を使用し、「1つのデータ」のみを取り出し
  // なお、thisを使いたい場合はイベントハンドラ同様bindが必要
  renderItem({item}) {
    return (
      <Text style={styles.listItem}>
        {item.title}
      </Text>
    );
  }
  
  render() {
    return (
      <FlatList
        data={DATA}
        renderItem={this.renderItem}
      />
    );
  }
}