最近、React Native で開発しているアプリにチャット機能の開発を行っているのですが、その際にプログラム上でページの最下部までスクロールする処理を実行したかったので備忘録としてまとめ。
なお、使用しているライブラリは「react-native-gifted-chat」です。
このライブラリ本当に便利なので、チャット機能を実装するなら是非導入してください！
さて実装方法ですが、まず事前準備として、<GiftedChat> コンポーネントに ref を指定します。
サンプルコードは下記の通りです。
1 2 3 4 5 6 7 8 9 | <GiftedChat ref={ref => this.giftedChatRef = ref} messages={messages} onSend={this.sendMessage} user={this.state.sender} locale='ja' placeholder='メッセージを入力' scrollToBottom={true} scrollToBottomComponent={() => {return <Ionicons name='chevron-down' size={18} />}} /> |
あとは、最下部へスクロールを実行したいタイミングで、下記を実行すればOKです！
1 | this.giftedChatRef.scrollToBottom(); |
最初は、React Native の ScrollView コンポーネントのメソッド scrollTo を使ってみたのですが、ワーニングが発生したため却下しました。
で、最終的に上記の書き方ならワーニングも発生しないため、採用しました。
アニメーション付きでスルスル〜っという感じでスクロールするのでなかなかいい感じです。
以上、React Native の「react-native-gifted-chat」ライブラリで、コード上から最下部までスクロール方法についてでした。
ご参考になれば幸いです。
