NearBy

ちょっぴり役に立つ情報を発信しているブログです。

FlatListの基本的な使い方

はじめに

アプリ開発においてListViewのようなUIは必須だと思います。

今回はReactNativeで実現する方法について書きます。

FlatListとは

FlatListは、バージョン0.43から新しいComponentとして追加されています。

以前までは、ListViewというCompomentが主に使われていました。

FlatListは、ListViewで問題だったパフォーマンス面が改善されているので こちらを使った方が良いです。

実装

今回は、Feed Containerのようなものを作ってみます。

componentWillMount()APIからデータをFetchしてレスポンスをFlatListに渡すような想定です。

class FeedSample extends Component {
  constructor(props) {
    super(props);
    this.renderFeedList = this.renderFeedItem.bind(this);
    this.onFeedPress = this.onFeedPress.bind(this);
  }
  componentWillMount() {
    this.props.fetchFeeds(); // 1. Fetch
  }
  onFeedPress(url) {
    Actions.Webview({ url }); // cellタップ時にwebviewで表示するような実装(今回は触れません)
  }
  renderFeedItem({ item }) {
    return (
      <FeedItem
        item={item}
        onPress={() => this.onFeedPress(item.link)}  
      />
    );
  }
  render() {
    return (
       <View style={styles.container}>
         // 2. FlatListにデータを入れる
        <FlatList
          data={this.props.feeds}
          renderItem={this.renderFeedItem}
          keyExtractor={item => item.id}
        />
      </View>
    );
  }
}

1: APIからデータをFetchしてくる箇所です。Fetchしたデータは、this.props.feedsに入ります。

2: 実際にFlatListにデータを入れる箇所です。

dataにデータを入れて、不要なRerenderを防ぐためにkeyExtractorにユニークな値を入れます。

renderItemには、constructorでbindしているrenderFeedItemを入れて 各cellのviewはそっちで定義するようにしています。

cellのUIは変えましたが、こんな感じのUIになりました。

f:id:zawank0:20180403092952p:plain

まとめ

基本的なFlatListの使い方について説明しました。

pull to refresh 等も実装できるので、また次回書きます。

-> 書きましたー。

www.near-by.design