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

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

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

関連ライブラリ

react nativeでこれらのような動作を実行しようと思えば、下記のプラグインが検索でヒットしました。

react-native-gifted-listview
react-native-pull-to-refresh
react-native-pull-refresh

といった様々なライブラリがヒットしますが、結論からいうと「これらのライブラリを使うなら自分で実装した方がいい」と思いました。

というのもreact nativeには、引っ張ってページを更新するメソッドは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>
    );
  }
}

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

注意点としては、ScrollView内のrefreshControlで使用するをきちんと最初にimportしてあげることですかね。

後はそれほど詰まることなく実装できるかと思います。

まとめ

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

意外と調べるとreact nativeでもアプリっぽい動作をさせるための方法がありそうなので、学習していきたいところです。

SNSでもご購読できます。

コメントを残す

*