以前からよく取り上げさせていただいている React Native でチャットページを簡単に実装できるライブラリ「react-native-gifted-chat」で、上までスクロールしたら以前のチャットメッセージを追加読み込みする機能を実装する方法についてです。
「react-native-gifted-chat」ライブラリにも、loadEarlier や onLoadEarlier という Props があるのですが、こちらはチャットメッセージ最上部に表示される「以前のメッセージを読み込む」ボタンをタップしないと発火しませんでした。
今回は、上までスクロールしたことを検知して、自動で追加読み込み処理が実行されてほしかったので別の方法を使います。
react-native-gifted-chat ライブラリの GitHub はこちらです。
FaridSafi/react-native-gifted-chat: 💬 The most complete chat UI for React Native
https://github.com/FaridSafi/react-native-gifted-chat
もう何回も紹介していますが…念のため！
参考にしたサイトがあったのですが、うっかりリンクを保存し忘れてしまったので、いきなりサンプルコードを掲載します。
<GiftedChat
messages={this.state.messages}
onSend={this.sendMessage}
user={this.state.sender}
locale='ja'
placeholder='メッセージを入力'
keyboardShouldPersistTaps='never'
timeFormat='H:mm'
alignTop={true}
alwaysShowSend={true}
infiniteScroll={true}
loadEarlier={this.state.isLoadingEarlier}
isLoadingEarlier={true}
listViewProps={{
onEndReached: this.onEndReached,
onEndReachedThreshold: 0.4,
}} />
11 行目から 17 行目が追加する設定です。
無限スクロールを有効にし、チャットメッセージ最上部に追加読み込み中を表すローディングアイコンを表示するようにしています。
で、上までスクロールしたら追加読み込みを実行する処理は 14 行目から 17 行目の listViewProps で指定しています。
「react-native-gifted-chat」ライブラリでは、メッセージの吹き出しを表示するのに React Native の FlatList を使用しており、listViewProps ではその FlatList の Props を設定することができます。
上記のサンプルコードでは、FlatList の Props である onEndReached と onEndReachedThreshold を指定しています。
上記のように追加して実際に実行してみたところ、上にスクロールしていくとちゃんと onEndReached に指定した this.onEndReached() が呼び出されました！
あとは、任意の処理を this.onEndReached() 内に記述して、以前のメッセージを取得してください。
なお、追加読み込みのローディングアイコンの表示/非表示は state の isLoadingEarlier で管理しています。
もし、全部のメッセージを取得したら、isLoadingEarlier を false にしてローディングアイコンを非表示にしてください。
もしくは、renderLoadEarlier で以前のメッセージを読み込むボタンのカスタマイズができるので、こちらで表示/非表示を切り替えてもいいと思います。
以上、React Native の「react-native-gifted-chat」ライブラリで、チャットページを上にスクロールしたら以前のメッセージを自動で読み込む機能を実装する方法についてでした。
React Native の FlatList を使ったことがあればそこまで難しくないと思いますので、頑張って下さい。
ご参考になれば幸いです。
