React Navigation V.6 - 仅当从其他某些屏幕返回时才重新获取屏幕组件中的数据

Question

我正在使用

React-Navigation V6

并且我有 4 个屏幕。其中 3 个可通过按钮从第一个开始访问，

在我的第一个屏幕中，我有：

useEffect(() => {
    if (navigation.isFocused()) {
      fetchSomeData();
        }
    }
}, [navigation.isFocused()])

这是因为当我从两个屏幕返回时，我想重新获取数据。但是，当我从第三个屏幕返回时，我想要 NOT 再次重新获取数据。

我如何实现这一目标？我尝试在 React REDUX 中使用

dataFetchingFlag

变量，但它变得非常非常混乱，特别是如果有更多屏幕。

Answer 1

使用路由参数。在第一个屏幕中，仅当设置了特定参数时才调用函数。

useEffect(() => {
  if (route.params?.refresh) {
    fetchSomeData();
  }
}, [route.params?.refresh]);

在其他屏幕中，将参数设置为 true 或 false，以便在返回时获得所需的行为。

navigation.navigate({
  name: 'First',
  params: { refresh: true },
  merge: true,
});

另一种方法是使用 onStateChange 监听状态更改并基于该更改调用函数。

<NavigationContainer onStateChange={(state) => console.log(state)}>
  <Stack.Navigator>
...
  </Stack.Navigator>
</NavigationContainer>