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

Question

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

我知道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是最好的一个，但你可以使用上下文和反应挂钩来创建你自己的。然后，您可以从上一个屏幕设置状态，并在当前屏幕中读取。

Answer 2

焦茨哈达的回答很有道理。Redux是通过保持全球状态来解决这类问题的一种非常有用的方法，这类问题是Redux如何为Apollo提供有用补充的一个很好的例子。

话虽如此，我不想为一件小事设置Redux，所以我继续研究这个问题，我找到了一种方法来解决这个问题，而不需要为感兴趣的人添加Redux。

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

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 });
}
}

通过将导航屏幕B切换到屏幕B，我可以提醒屏幕A我不再在屏幕B上，以便在加载更改时停止导航。如果我要更改屏幕以停止导航到屏幕B。因此，例如，在屏幕B的后退按钮中，我会输入：

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

我承认它比redux复杂得多，但我让它发挥了作用，所以我想与任何有同样问题的人分享这个解决方案。