React Nativeでページを引っ張って更新するのを実装する方法

Twitterなどでおなじみの下にスクロールをして更新する機能ありますよね。

React Nativeでもこういったアプリっぽい動作を実装したいときもありますが、どのように実装するのかわからなかったので調べてみました。

関連ライブラリ
ネイティブの機能で実装する
まとめ

ネイティブの機能で実装する

ちなみに公式のページはここになります。
ソースを下記に書いてみます。

import React from "react";
import { ScrollView, RefreshControl, Text } from "react-native";
 
class RefreshTest extends React.Component {
  this.state = {
    refreshing: false,
  };
 
  fetchData = () => {
    ...hogehoge()
  }
 
  _onRefresh = () => {
    this.setState({refreshing: true});
    fetchData().then(() => {
      this.setState({refreshing: false});
    });
  }
 
  render() {
    return (
      <ScrollView
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh}
          />
        }
      />
        <Text>pull to refresh!</Text>
      </ScrollView>
    );
  }
}

基本的にはScrollViewにデフォルトである RefreshControl に RefreshControlコンポーネントを実装するだけです。

RefreshControl の引数にある refreshing は、更新を行っているクルクルを表示するかどうか、onRefresh は実際に引っ張られたときにどのような処理を行うかを表しています。

上記で言えば、onRefresh が実行されたときに refreshing を true に設定した上で、fetchData()を実行し、その後 refreshing を false に設定しています。

つまり、fetchData() にデータ取得に必要な処理を記述してあげると、引っ張って更新という処理を実現させることができます。

ただ一つ注意点としては、ScrollView内の refreshContro lで使用する RefreshControlコンポーネントは、きちんと最初にimportしてあげなければなりません。

これを忘れるとエラーが発生するので注意しておきたいところです。後はそれほど詰まることなく実装できるかと思います。

まとめ

今回は、React Nativeで引っ張って更新する方法についてお話しました。

詳しく調べているとReact Nativeには様々なコンポーネントがあるので、自分もまだまだ把握していない機能が多そうだと感じます。

ぜひとも他にも自分の知らない操作があるか今後も見ていきたいところですね。

関連ライブラリ

ネイティブの機能で実装する

まとめ