【ReactNative開発】スワイプして画面リロードをできるようにする

こんばんは。今日は、ReactNativeでスワイプリロードをできるようにする方法について、記事に残しておきたいと思います。

もう眠くて意識朦朧としているので参ります笑

スワイプでリロードさせる方法

ありました！

React NativeのRefreshControlコンポーネントが使えるようです！

これを使った実装は、React Native公式ページのサンプルがまんま役立ちました！

https://reactnative.dev/docs/refreshcontrol

＜公式ページより＞

import React from 'react';
import { RefreshControl, SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native';

const wait = (timeout) => {
  return new Promise(resolve => setTimeout(resolve, timeout));
}

const App = () => {
  const [refreshing, setRefreshing] = React.useState(false);

  const onRefresh = React.useCallback(() => {
    setRefreshing(true);
    wait(2000).then(() => setRefreshing(false));
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scrollView}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
          />
        }
      >
        <Text>Pull down to see RefreshControl indicator</Text>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollView: {
    flex: 1,
    backgroundColor: 'pink',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

中身の解説は、一晩寝てから書こうと思います笑　が、お役に立ちましたら下のいいねボタンをポチっていただけますと励みになります！

それでは一旦おやすみなさい・・・・

[番外編] ReactNativeをもっと学ぶなら・・・

React Nativeをもっとちゃんと学びたい！という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・！

土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。