今回は、React Native で無限スクロールを実装する方法についてです。
ちなみに無限スクロールとは、ページを一番下までスクロールしたら、追加コンテンツが自動で読み込まれる動きのことです。
ReactJS で実装しようとした場合、ライブラリのインストールが必要だったのですが、React Native の場合は、標準で使用できる FlatList を使えば良いとのことでした。
ライブラリを探さなくて済むのは良いですね！
React Native の FlatList のページはこちらから。
FlatList · React Native
https://reactnative.dev/docs/flatlist
さて実装方法ですが…FlatList の Props に onEndReached があるので、こちらに追加読み込み時に実行したい処理を追加するだけでした！
具体的には下記のとおりです。
<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 が呼び出されているようでした。
個人的な感覚だと、onEndReachedThreshold は 0.3 くらいがちょうど良いような気もしますが…こちらは実際に動かしてみて調整するのが良いと思います。
必要な処理はこれだけです！
あとは、Pull to Refresh も FlatList で実装できるようなので、こちらも追加したいですね。
以上、React Native の FlatList を使って無限スクロールを実装する方法についてでした。
ご参考になれば幸いです。
