react-nativeのフラットリストの使い方。

FlatListとはListViewより性能が良く、簡潔に書けるリストのことだ。

しかし、まだハマるところがあるので、メモ。

基本的な使い方は、まず、stateにリスト化するデータを記述。

state = {

  data: [{ id: 1, title: 'a' }, { id: 2, title: 'b' }, { id: 3, title: 'c' }]

};

次にクラス内に、renderItemメソッドに代入するメソッドとkeyExtractorを定義

_renderItem = ({ item }) => (

  <View>{item.title}</View>

);

_keyExtractor = ( item, index ) => item.id;

そして、Flatリストでレンダリングする。

||<

render() {
  return (
    <FlatList
      data={this.state.data}
      renderItem={this._renderItem}
      keyExtractor={this._keyExtractor}
    />
  );
}

>||

となる。

もっと改良できそうだけれども、全ての人の要望に答えるとこんな感じになるのかね。