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

20194/29

2018.07.07 2019.04.29

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内のrefreshControlで使用するRefreshControlコンポーネントは、きちんと最初にimportしてあげなければなりません。
これを忘れるとエラーが発生するので注意しておきたいところです。後はそれほど詰まることなく実装できるかと思います。