Question

在屏幕A上，有一个值来跟踪GraphQL突变的加载。我想将该加载值传递给屏幕B。我的问题是，当我尝试使用navigation.navigate(ScreenB, { loading })将该值作为参数传递给屏幕B时，加载的值不会更新-它始终保持为任何值是在此时调用navigation.navigate的。

我知道setParams会更新给定路由的参数，但是这似乎不适用于我的用例，因为它不会更改路由之间的参数。上一个屏幕有什么方法可以动态设置参数，以便我可以在当前屏幕上恢复更改的值？

const ScreenA = (props) => {
  const { data, loading } = useQuery(QUERY);

  (
    <View>
      <Button onPress={() => navigation.navigate(ScreenB, { loading } }/>
    </View>
  )
}

const ScreenB = (props) => {
  const screenALoading = navigation.getParam('loading');

  return (
    <Text>{loading}</Text>
  )
}

Answer 1

您可能要考虑向您的应用程序添加某种类型的全局状态，因为它可以解决此问题，并且随着您的应用程序变大，您可能仍希望在将来添加它。我相信Redux是最好的选择，但是您可以使用Context并使用钩子来创建自己的钩子。之后，您只需在上一个屏幕中设置状态，然后在当前屏幕中读取状态即可。

Answer 2

giotskhada的回答很有道理。 Redux是通过保持全局状态来解决此类问题的非常有用的方式，而此类问题是Redux如何为Apollo提供有用补充的一个很好的例子。

话虽这么说，我不想为一件小事设置Redux，所以我继续研究这个问题，并且我想出了一种解决方法，而不必为有兴趣的人添加redux。

为了在从屏幕A切换后更新屏幕B上的加载，我仅使用切换到屏幕B后的更新值再次调用navigation.navigate。

const [navigatedToScreenB, toggleNavigatedToScreenB] = useState<boolean>(false);

useEffect(() => {
  if(navigatedToScreenB) {
   navigation.navigate(ScreenB, { loading });
  }
}, [loading])

由于我只想对ScreenB进行进一步的导航，因此如果加载更改，添加loading作为useEffect的依赖项很重要。

然后在onPress函数中切换到ScreenB，我这样做：

onPress={() => 
  {
    toggleNavigatedToScreenB(true);
    navigation.navigate(ScreenB, { toggleNavigatedToScreenB });
  }
}

通过将toggleNavigatedToScreenB传递给ScreenB，我可以提醒ScreenA我不再在Screen B上，以便在加载更改时停止导航。如果我要更改屏幕以停止导航到ScreenB，那么例如在ScreenB的后退按钮中，我输入：

onPress={() => 
  {
    toggleNavigatedToScreenB(false);
    navigation.goBack();
  }
}

我承认它比redux复杂得多，但我可以使用它，所以我想与遇到相同问题的任何人共享此解决方案。

如何在React Navigation中将参数从上一个屏幕传递到我当前的屏幕？

2 个答案: