如何使用 React Navigation 在不同的选项卡中重置堆栈 5.x

Question

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

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

我希望能够在 Screen2 上放置一个按钮来重置 Tab1 上的 Stack。

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

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

Answer 1

最后我能够使用 reset 操作来完成此操作。我为要重置的选项卡发送了嵌套状态：

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

看起来很聪明，只要标签导航器是当前路由的父级，它就会找到并重置它。

Answer 2

谢谢@anorakgirl。它完美地工作！我想补充一些人们可能想知道的其他案例。由于应用程序通常包含 4-5 个选项卡。

下面的代码用于重置多个标签页。

TabNavigator
    Tab1: 'tab1_name' 
      StackNavigator
         - ScreenA
         - ScreenB

    Tab2: 'tabs_name'
      StackNavigator
         - ScreenC
         - ScreenD

    Tab3: 'tab3_name'
      StackNavigator
         - ScreenE
         - ScreenF

navigation.dispatch(
  CommonActions.reset({
    routes: [
      {
        name: 'tab1_name',
        state: {
          routes: [
            { name: 'ScreenA' },
            { name: 'ScreenB' },
          ]
        }
      },
      {
        name: 'tab2_name',
        state: {
          routes: [
            { name: 'ScreenC' },
          ]
        }
      },
      {
        name: 'tab3_name',
        state: {
          routes: [
            { name: 'ScreenE' },
            { name: 'ScreenF' },
          ]
        }
      },
    ]
  })
)

使用此代码，您看到的第一页是 tab1_name 选项卡的 ScreenB 屏幕。

因此，如果您想在运行调度函数之后首先查看 tab3_name 选项卡的 ScreenF 屏幕，代码应该类似于：

navigation.dispatch(
  CommonActions.reset({
    routes: [
      {
        name: 'tab3_name',
        state: {
          routes: [
            { name: 'ScreenE' },
            { name: 'ScreenF' },
          ]
        }
      },
      {
        name: 'tab1_name',
        state: {
          routes: [
            { name: 'ScreenA' },
            { name: 'ScreenB' },
          ]
        }
      },
      {
        name: 'tab2_name',
        state: {
          routes: [
            { name: 'ScreenC' },
          ]
        }
      },
    ]
  })
)

顺便说一句，当你写tab的state的routes的时候，应该是按照页栈的顺序写的。这样它就会像你预期的那样工作。

navigation.dispatch(
  CommonActions.reset({
    routes: [
      {
        name: 'tab3_name',
        state: {
          routes: [
            // { name: 'ScreenE' },   // removed
            { name: 'ScreenF' },
          ]
        }
      },

如果像上面一样省略第一个堆栈页面，ScreenE 将无法访问，只能在运行调度函数之后访问 ScreenF。

希望这对你有用。

如何使用 React Navigation 在不同的选项卡中重置堆栈 5.x

How to reset a Stack in a different Tab using React Navigation 5.x

react-native-navigation

react-navigation

react-navigation-v5