Question

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

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

我希望能够在Screen2上放置一个按钮，以重置Tab1上的堆栈。

我想知道这里的文档中提到的“目标”参数是否会有所帮助，但是没有如何使用它的示例。 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 屏幕。

因此，如果您想在运行 dispatch 函数后首先看到 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的routes的{{1}}时，它应该遵循页面堆栈的顺序。这样它就会按您的预期工作。

state

如果省略上面的第一个堆栈页，navigation.dispatch( CommonActions.reset({ routes: [ { name: 'tab3_name', state: { routes: [ // { name: 'ScreenE' }, // removed { name: 'ScreenF' }, ] } }, 是不可访问的，只有在运行调度函数后才能访问 ScreenE。

希望这对你有用。

如何使用React Navigation 5.x在其他选项卡中重置堆栈

2 个答案: