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

プログラミング
※このページの内容に広告・PRが含まれます。

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

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

関連ライブラリ

React Nativeでこれらのような動作を実行しようと思えば、下記のライブラリが検索でヒットしました。

様々なライブラリが存在しますが、さらに調査をしてみたところReact Nativeの「ScrollView」と「ListView」では、標準で RefleshControl という機能が実装されていることがわかりました。

実際に実装もしてみましたが、それほど難しくなく引っ張って更新する動作が実現できたという印象でした。

上記のライブラリはいずれも「ScrollView」か「ListView」を継承しているっぽかったので、「ScrollView」と「ListView」以外で上記のような更新の機能を実装したい!と思われる方は、別の方法を模索する必要がありそうです。

今回は、余計なライブラリを追加するとバージョン管理も大変になるということもあり、ネイティブの機能で実装することを考えます。

 

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

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

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には様々なコンポーネントがあるので、自分もまだまだ把握していない機能が多そうだと感じます。

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

タイトルとURLをコピーしました