如果我从一个页面返回到另一个页面，navigation.navigate()、navigation.push()、navigation.goBack() 和 navigation.popToTop() 之间有什么区别? [英] What is a difference between navigation.navigate(), navigation.push(), navigation.goBack() and navigation.popToTop() if I go back from page to page?

问题描述

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

From this and this, I learned that there is a meaningful difference between navigation.navigate() and navigation.push(). Nevertheless, I am still wondering if I can use navigation.navigate() or navigation.push() instead of navigation.goBack() or navigation.popToTop().

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

In my case, there is one page, and some parameters are included in the navigation. (i.e, through navigation.navigate(param, {...}) or navigation.push(param, {...}). Once I move to another page, some change in variable happened, and now I would like to send back the param with new data to the first page. I considered doing navigation.navigate(param, {...}) or navigation.push(param, {...}) again as it looks I cannot send back any parameters using goBack() or popToTop(), according to this

我检查了 this，但我不是 100% 确定，因为我认为页面可能会堆叠在一起如果用户多次执行上述操作，则很多.

I checked this, but I am not 100% sure as I think pages might be stacked a lot if a user does the above actions many times.

推荐答案

举个例子

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

Think you have screens A,B and C in the stack and A is the home screen. The actual stack will be an object but for easy understanding i'm using a simple array.

当您启动堆栈时将是 [A]

When you start the stack will be [A]

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

When you do a navigate to B the stack will be [A,B]

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

And if you push C to the stack from B then it will be [A,B,C]

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

Now all this is common but now if you do a navigate to B from C then it will unmount C and go back to B and the stack will be [A,B]

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

If you chose push then it will add a new screen to the stack and stack will be [A,B,C,B] Notice that push always adds a new screen to the stack.

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

Ignore the push and assume that the stack is [A,B,C] Now if you do goBack from C then it will pop just like the navigate method and go back to B.

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

But if you do popToTop it will unmount both C and B and make the stack look like this [A].

区别在于 goBack 和 popToTop 不传递诸如 navigation 和 push 之类的参数.

The difference is that goBack and popToTop does not pass parameters like navigate and push.

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

There is a way to achieve the same result of popToTop and goBack using navigate and useNavigationState.

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

The useNavigationState hook will get you the current navigation state which will have the information of all the screens in the stack. The sample navigation state value would be like this

{
  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' },
    },
  ],
}

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

As you can see you have the option to use this information to navigate to any screen in the stack. The navigate method can be used like below as well

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

如果您使用 0 键，那么您将与参数一起进入 root，它将在中间卸载屏幕.

If you use the key 0 then you will be taken to root along with a parameter and it will unmount the screen in the middle.

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

If you want to go back you can simply do an index - 1 which will give the same effect as goBack

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

所以你的要求可以实现.

So your requirement can be achieved.

这篇关于如果我从一个页面返回到另一个页面，navigation.navigate()、navigation.push()、navigation.goBack() 和 navigation.popToTop() 之间有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！