[React Native] 下にスワイプしてデータを更新する方法（RefreshControlコンポーネント）

管理者

1年前

概要
サンプル

概要

React NativeでScrollViewコンポーネントのrefreshControlプロパティにRefreshControlコンポーネントを渡すと「下にスワイプしてデータを更新」を実装することができる。

サンプル

import { StyleSheet, ScrollView, ImageBackground, RefreshControl } from "react-native";

export default function App() {
  const [refreshing, setRefreshing] = useState(false);
  const hoge = async() => {
    setRefreshing(true)
    // ここに更新処理が入る
    setRefreshing(false)
  }
  return (
    <ScrollView refreshControl={<RefreshControl refreshing={refreshing} onRefresh={hoge}/>}>
      〜省略〜
    </ScrollView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#202328",
  },
});