在选项卡导航器中将多个屏幕深入到堆栈中

Question

在我的反应导航应用程序（5.x）中，我有这个导航结构：

Tabs
- Home
- Stack1
- Stack2
- Stack3

Tabs 是标签导航器；每个 StackN 是一个有 3 个屏幕的堆栈导航器；例如Stack1ScreenA, Stack1ScreenB, Stack1ScreenC.

我的目标：从 Home（初始屏幕）导航到例如Stack1 > Stack1ScreenA > Stack1ScreenB > Stack1ScreenC.

我一直在尝试使用类似这样的东西（类似于），但无济于事：

navigation.dispatch(
  CommonActions.reset({
    index: 2,
    routes: [
      {
        name: 'Stack1',
        params: { screen: 'Stack1ScreenA' },
      },
      {
        name: 'Stack1',
        params: { screen: 'Stack1ScreenB' },
      },
      {
        name: 'Stack1',
        params: { screen: 'Stack1ScreenC' },
      },
    ],
  })
)

但我只是在 Stack1（即 Stack1ScreenA）的默认屏幕结束。

当然，这都是从我的实际代码中抽象出来的。我的下一步是整理一个实际上只执行上述操作的最小代码示例，但我想在此期间我会联系到这里，看看是否有人发现我犯了一个明显的错误。

更新：这里有小吃：https://snack.expo.dev/@brettdh/react-navigation-nested-tab-stack-deep-nav

更新update：我修复了零食中的bug；还不确定我的应用程序是否有相同的错误或不同的错误。

更新^3：好的，差不多了。我现在在我的应用程序中使用它，除了当我将三个屏幕跳入堆栈时，它们以“模态”模式打开（在 iOS 上从底部向上滑动），而不是从右侧滑入当我一次进入一个屏幕时执行此操作。我检查了零食，iOS 上的行为是一样的。研究如何让 .reset 表现得像逐一屏幕导航。

Answer 1

原来这里一切的关键是理解你想设置哪个导航器的状态。

就我而言，我想设置两个导航器的状态：

选项卡导航器，到 Stack1 选项卡
选项卡 Stack 中的堆栈导航器，将三个屏幕推入堆栈

第一个并发症：正如您在上面链接的 Snack 中看到的那样，我原来的问题中没有提到的另一个并发症是选项卡导航器本身包含在另一个堆栈导航器中（用于根据需要显示模态屏幕）。因此，最后一部分（请参阅上面的“更新^3”）的挑战是确保我正在设置内部堆栈导航器的堆栈状态（设置为使用默认 slide-from-the-right 动画），而不是外层（设置为使用“模态”slide-up-from-the-bottom 动画）。

所以，我真正需要发送的操作是：

CommonActions.reset({
    routes: [
      {
        name: 'Stack1',
        state: {
          routes: [
            { name: 'Stack1ScreenA' },
            { name: 'Stack1ScreenB' },
            { name: 'Stack1ScreenC' },
          })),
        },
      },
    ],
})

据我所知，这里的关键是状态的嵌套，以便分派的操作设置预期导航器的状态。

在选项卡导航器中将多个屏幕深入到堆栈中

Navigate multiple screens deep into a stack within a tab navigator

react-native

react-navigation