🍣

【RN】ScrollViewで下スワイプでデータを更新

2021/05/12に公開

React Native

React

TypeScript

tech

はじめに

今回はReactNativeのScrollViewを使ってデータの追加読み込みを行う際の方法について紹介します。
リスト形式でデータを表示させる場合は大体必須となってくる機能なので、役立つかと思います。

やりたいこと

下図のようにScrollViewを下にスワイプすることでデータのリフレッシュを行うような挙動にします。
fetch

前提条件

react-native@0.64.0
typescript@3.9.9

refreshControlを使う

方法は簡単でScrollViewのrefreshControlを設定するだけです。

先ほどのサンプルは実際には以下のようなコードとなっています。

Test.tsx

import React, {useCallback, useState} from 'react';
import {
  RefreshControl,
  ScrollView,
  Text,
} from 'react-native';

// setTimeoutで擬似的にsleepを行う
const sleep = msec => new Promise(resolve => setTimeout(resolve, msec));

const Test = () => {
  // 表示するテキスト
  const [text, setText] = useState('上に引っ張って更新');
  // 更新処理を行っているかどうか
  const [refreshing, setRefreshing] = useState(false);
  // 任意の更新処理
  const anyFunction = useCallback(async () => {
    setRefreshing(true);
    // 非同期処理(実際にはここでデータの更新を行う)
    await sleep(1000);
    setText('更新しました!');
    setRefreshing(false);
  }, []);

  return (
    <ScrollView
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={anyFunction} />
      }>
      <Text>{text}</Text>
    </ScrollView>
  );
};

export default Test;

sleepは任意の非同期処理の代わりに設定しています。
実際にはここに「表示しているデータの更新処理」が入ってきます。

RefreshControlが優秀で、これを埋め込むだけで冒頭で紹介したようなそれっぽいUIになります。

まとめ

今回はScrollViewを使って、下スワイプでデータを更新する場合の記法について紹介しました。
表示データの終端まで表示されたら追加で読み込みを行うような処理も割とメジャーですが、その場合はFlatListの方が使い勝手がいい印象です。

もしどうしてもScrollViewでやる必要がある場合はonMomentumScrollEndなど、終端に到達したことをキャッチするイベントハンドラが用意されているので、そのあたりを使用するとよいかと思います。