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

Question

从 这个 和 这个我了解到，这两者之间存在着有意义的区别。navigation.navigate() 和 navigation.push(). 尽管如此，我还是想知道我是否可以使用 navigation.navigate() 或 navigation.push() 而不是 navigation.goBack() 或 navigation.popToTop().

在我的案例中，有一个页面，导航中包含一些参数。(即通过 navigation.navigate(param, {...}) 或 navigation.push(param, {...}). 当我移动到另一个页面时，变量发生了一些变化，现在我想把带有新数据的param发回首页。我考虑过这样做 navigation.navigate(param, {...}) 或 navigation.push(param, {...}) 看起来我又不能用 goBack() 或 popToTop()根据 这个

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

Answer 1

让我们举个例子

想象一下，你的堆栈中有A、B、C三个屏幕，A是主屏幕，实际的堆栈将是一个对象，但为了便于理解，我使用一个简单的数组。

当你启动堆栈时，堆栈将是[A]。

当你做一个导航到B的时候，堆栈将是[A,B]。

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

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

如果你选择了push，那么它将添加一个新的屏幕到堆栈，堆栈将是[A,B,C,B]注意push总是添加一个新的屏幕到堆栈。

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

但是如果你做popToTop，它将会同时解除C和B的挂载，使堆栈看起来像这样[A]。

不同的是，goBack和popToTop并不像navigate和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号键，那么你会被带入到根目录下，同时还有一个参数，它会解除中间的屏幕。

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

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

所以你的要求可以实现。