如何设置 React Navigation StackNavigator 以自动将其参数传递到子屏幕

Question

我有一些导航器是这样设置的：

TabNavigator:
  Tab1:
  Tab2(id): 
    Screen1
    Screen2

简而言之，我想导航到 Screen1，将

id

参数传递给 Tab2 并让它自动将其传递给 Screen1。我知道您可以在调用导航方法时手动将参数传递给 Tab2 和 Screen1，但我不想继续重复这一点。这可能吗？

为了详细说明，我想这样做是因为为 Tab2 屏幕检索异步数据的 Context 组件（我们称之为 ContextProvider1）位于树的相当远的位置（因为它被其他选项卡使用）。当我导航到 Screen1 时，我将

id

传递给 Tab1，然后从那里调用 ContextProvider1 提供的

setId

。每当 ContextProvider1 中的 id 发生变化且不等于数据的 id 时，我立即将其设置为 undefined，这样就不会显示它。

但是，由于某种原因，id 的更新仍然需要一段时间，并且旧数据仍然在 Screen1 上显示大约一秒钟。我不希望看到旧数据（通常用于不同的

id

），但是Screen1无法访问当前id，除非我在导航调用中直接将其传递给Screen1，因此Screen1本身无法计算判断它拥有的数据是否是正确的数据集。

（更奇怪的是，如果我在导航到 Screen1 时将 id 传递给 Screen1，但实际上不对 id 执行任何操作，那么旧数据显示的问题就会消失）

Answer 1

检索异步数据的 Context 组件

在此过程中您是否调用了 api 端点？如果是，我建议您看看 tanstack-query。我在之前的应用程序中成功实现了它，在不同的屏幕上调用多个端点。

使用

queryInvalidation

功能让我可以轻松地在屏幕之间同步数据。