React Native RefreshControl 获取数据

问题描述

我想使用 RefreshControl 来刷新和获取拉取数据。我的问题是当我使用 React Native Navigation 并想将 RefreshControl 添加到所有屏幕时。如果没有重复的 RefreshControl 代码，我该怎么做？我的意思是如何在定义所有导航屏幕的父组件中添加刷新代码，然后在子组件中定义 fetch（或如何在刷新时调用 useFocusEffect）？

父组件：

export default function Index({ navigation }) {
  return (
              <Drawer.Navigator initialRouteName="Profile">
                  <Drawer.Screen
                      name="Profile"
                      component={Profile}
                  />
                  <Drawer.Screen
                      name="Training"
                      component={Training}
                  />
                  <Drawer.Screen
                      name="Equipment"
                      component={Equipment}
                  />
              </Drawer.Navigator>
    );
}

孩子：

export default function Equipment({ navigation }) {
const [refreshing,setRefreshing] = React.useState(false);

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

const onRefresh = React.useCallback(() => {
    setRefreshing(true);

    // fetching data here

    wait(2000).then(() => setRefreshing(false));
},[]);

useFocusEffect(
    React.useCallback(() => {
        onRefresh();
    },[onRefresh])
);

return (
    <ScrollView refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        // how move RefreshControl to parent?
        // and define fetching data?
    }>
    </ScrollView>
);
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）