如果我从一个页面返回到另一个页面，navigation.navigate()、navigation.push()、navigation.goBack() 和 navigation.popToTop() 之间有什么区别？

Question

从this和this中，我了解到navigation.navigate()和之间存在有意义的差异navigation.push()。尽管如此，我仍然想知道我是否可以使用navigation.navigate()ornavigation.push()代替navigation.goBack()or navigation.popToTop()。

就我而言，只有一页，导航中包含一些参数。（即，通过navigation.navigate(param, {...})或navigation.push(param, {...})。一旦我移动到另一个页面，变量发生了一些变化，现在我想将带有新数据的参数发送回第一页。我考虑这样做navigation.navigate(param, {...})或navigation.push(param, {...})再次，因为它看起来我无法发回任何参数使用goBack()或popToTop()，根据this

我检查了这个，但我不是 100% 确定，因为我认为如果用户多次执行上述操作，页面可能会堆积很多。

Answer 1

让我们举个例子

假设您在堆栈中有屏幕 A、B 和 C，而 A 是主屏幕。实际的堆栈将是一个对象，但为了便于理解，我使用了一个简单的数组。

当您启动堆栈时将 [A]

当您导航到 B 时，堆栈将为 [A,B]

如果你将 C 从 B 推入堆栈，那么它将是 [A,B,C]

现在所有这些都很常见，但是现在如果你从 C 导航到 B 那么它将卸载 C 并返回到 B 并且堆栈将是 [A,B]

如果您选择推送，那么它将向堆栈添加一个新屏幕，堆栈将为 [A,B,C,B] 请注意，推送总是向堆栈添加一个新屏幕。

忽略推送并假设堆栈是 [A,B,C] 现在，如果您从 C 执行 goBack，那么它将像导航方法一样弹出并返回到 B。

但是，如果您执行 popToTop，它将卸载 C 和 B，并使堆栈看起来像这样 [A]。

不同之处在于 goBack 和 popToTop 不传递诸如 navigation 和 push 之类的参数。

有一种方法可以使用navigate 和useNavigationState 实现popToTop 和goBack 相同的结果。

useNavigationState 挂钩将为您获取当前导航状态，该状态将包含堆栈中所有屏幕的信息。示例导航状态值将是这样的

{
  stale: false,
  type: 'stack',
  key: 'stack-A32X5E81P-B5hnumEXkbk',
  index: 1,
  routeNames: ['Home', 'Details', 'MyView', 'ExtView'],
  routes: [
    { key: 'Home-y6pdPZOKLOPlaXWtUp8bI', name: 'Home' },
    {
      key: 'MyView-w-6PeCuXYrcxuy1pngYKs',
      name: 'MyView',
      params: { itemId: 86, otherParam: 'anything you want here' },
    },
  ],
}

如您所见，您可以选择使用此信息导航到堆栈中的任何屏幕。导航方法也可以像下面一样使用

navigation.navigate({ key: navState.routes[0].key, params: { id: 12 } })

如果您使用键 0，那么您将与参数一起被带到 root 中，它将在中间卸载屏幕。

如果你想返回，你可以简单地做一个 index - 1 这将产生与 goBack 相同的效果

navigation.navigate({ key: navState.routes[navState.Index-1].key, params: { id: 12 } })

所以可以达到你的要求。