浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React Native】FlatListで無限スクロールを実装する

今回は、React Native で無限スクロールを実装する方法についてです。
ちなみに無限スクロールとは、ページを一番下までスクロールしたら、追加コンテンツが自動で読み込まれる動きのことです。

ReactJS で実装しようとした場合、ライブラリのインストールが必要だったのですが、React Native の場合は、標準で使用できる FlatList を使えば良いとのことでした。
ライブラリを探さなくて済むのは良いですね!

React Native の FlatList のページはこちらから。

FlatList · React Native
https://reactnative.dev/docs/flatlist

 

さて実装方法ですが…FlatListPropsonEndReached があるので、こちらに追加読み込み時に実行したい処理を追加するだけでした!
具体的には下記のとおりです。

<FlatList
  data={this.state.list}
  keyExtractor={item => `${item.id}`}
  renderItem={({item, index}) => {
    return <View key={index}><Text>{item.name}</Text></View>
  }}
  onEndReached={this.getMoreData}
  onEndReachedThreshold={0.3} />

state の list で表示したいデータを管理し、onEndReachedThreshold で指定した距離内までスクロールされたら、onEndReached に指定した getMoreData() が一度だけ呼び出されるようになっています。
なお、onEndReachedThreshold は、デフォルトのままだと 0.5 が指定されており、画面の約半分までスクロールされると onEndReached が呼び出されているようでした。
個人的な感覚だと、onEndReachedThreshold0.3 くらいがちょうど良いような気もしますが…こちらは実際に動かしてみて調整するのが良いと思います。

必要な処理はこれだけです!
あとは、Pull to Refresh も FlatList で実装できるようなので、こちらも追加したいですね。

 

以上、React Native の FlatList を使って無限スクロールを実装する方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)