如何使用 React Navigation 5.x 在不同的选项卡中重置堆栈 [英] How to reset a Stack in a different Tab using React Navigation 5.x

问题描述

我的应用程序有一个 TabNavigator，每个 Tab 中有一个 StackNavigator.通过单击不同的选项卡在堆栈之间导航时，我不会重置堆栈，因此当您更改选项卡时，堆栈包含以前的状态.但是，偶尔从一个选项卡中的屏幕中，我想导航到不同选项卡中的特定屏幕，在这种情况下，我想重置目标选项卡中的堆栈.

My app has a TabNavigator with a StackNavigator in each Tab. I'm not resetting the stacks when navigating between them by clicking on different tabs, so when you change tab, the stack contains the previous state. However, occasionally from within a Screen in one Tab, I want to navigate to a specific Screen in a different tab, and on that occasion, I want to reset the stack in the target Tab.

TabNavigator
    Tab1 
      StackNavigator
         - ScreenA
         - ScreenB
    Tab2
      StackNavigator
         - Screen1
         - Screen2

我希望能够在 Screen2 上放置一个按钮来重置 Tab1 上的堆栈.

I want to be able to put a button on Screen2 that resets the Stack on Tab1.

我想知道此处文档中提到的目标"参数是否有帮助，但没有关于如何使用它的示例.https://reactnavigation.org/docs/navigation-actions/

I was wondering if the "target" parameter mentioned in the docs here might help, but there's no examples of how to use it. https://reactnavigation.org/docs/navigation-actions/

(我在这里搜索过，但为 4.x 建议的答案似乎不再适用).谢谢！

(I have searched on here but answers suggested for 4.x don't seem to apply anymore). Thanks!

推荐答案

最后我能够使用 reset 操作来做到这一点.我为要重置的选项卡调度了嵌套状态:

In the end I was able to use the reset action to do this. I dispatched nested state for the tab I wanted to reset:

navigation.dispatch(
  CommonActions.reset({
    routes: [
      {
        name: 'tab-route-name',
        state: {
          routes: [
            { name: 'stack-route-1' },
            { name: 'stack-route-2' },
            { name: 'stack-route-3' }
          ]
        }
      }
    ]
  })
)

似乎很聪明，只要标签导航器是当前路由的父级，它就会找到它并重置它.

It seems to be clever enough that as long as the tab navigator is a parent of the current route, it will find it and reset it.

这篇关于如何使用 React Navigation 5.x 在不同的选项卡中重置堆栈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！