如何使用反应导航深度链接到嵌套堆栈？答案

【问题标题】：How to deep link to nested stacks with react natvgation?如何使用反应导航深度链接到嵌套堆栈？
【发布时间】：2019-10-04 19:41:19
【问题描述】：

我正在尝试使用 React Navigation 为我的应用程序提供深层链接。顶级导航堆栈的路径可以正常工作，但这些路径的子路径不能。

我的应用使用了一堆 React Native、redux、redux 导航和 Expo。我已经阅读了 Expo 和 React Navigation 上的文档，了解如何实现与应用程序的链接。我已经分配了正确的前缀和所有内容。我正在通过使用重定向到所需路径的按钮以及运行来测试应用程序 adb shell am start -W -a android.intent.action.VIEW -d "exp://127.0.0.1:19000/--/main"

如果我尝试访问/auth 或/main，它会按预期工作。我看到应用相应地切换屏幕。

adb shell am start -W -a android.intent.action.VIEW -d "exp://127.0.0.1:19000/--/main

adb shell am start -W -a android.intent.action.VIEW -d "exp://127.0.0.1:19000/--/auth

但是当我尝试去一个嵌套路径时，比如/main/events，什么都没有发生。

adb shell am start -W -a android.intent.action.VIEW -d "exp://127.0.0.1:19000/--/main/events

这是我的路线的简化版本，但我实际上是在使用这个确切的代码来运行我的测试。

AppNavigator = createAppContainer(createSwitchNavigator({
  // You could add another route here for authentication.
  // Read more at https://reactnavigation.org/docs/en/auth-flow.html
  AuthLoading: {
    screen: AuthLoadingNavigator,
  },
  Main: {
    path: 'main',
    screen: createBottomTabNavigator({
      HomeStack: createStackNavigator({
        Home: {
          path: 'home',
          screen: HomeScreen,
          navigationOptions: () => ({
            title: 'Home',
            headerMode: 'none',
            headerBackTitle: null,
            headerBackTitleVisible: false,
            header: null,
          }),
        },
        EventsArchive: {
          path: 'events',
          screen: EventsArchiveScreen,
          navigationOptions: () => ({
            headerMode: 'screen',
            headerBackTitle: null,
          }),
        },
      })
    })
  },
  Auth: {
    path: 'auth',
    screen: AuthNavigator,
  },
}))

【问题讨论】：

这样试试。 adb shell am start -W -a android.intent.action.VIEW -d "exp://127.0.0.1:19000/--/events
那也不行
我认为EventsArchive路径应该是main/events@mixcas
是的，应该是这样，但它不起作用。

标签： reactjs react-native react-navigation

【解决方案1】：

我找到了解决问题的方法。我错过了为HomeStack 分配路径。这是工作代码：

AppNavigator = createAppContainer(createSwitchNavigator({
  // You could add another route here for authentication.
  // Read more at https://reactnavigation.org/docs/en/auth-flow.html
  AuthLoading: {
    screen: AuthLoadingNavigator,
  },
  Main: {
    path: 'main',
    screen: createBottomTabNavigator({
      HomeStack: {
        path: '', // THIS IS THE PART THAT I WAS MISSING
        screen: createStackNavigator({
          Home: {
            path: 'home',
            screen: HomeScreen,
            navigationOptions: () => ({
              title: 'Home',
              headerMode: 'none',
              headerBackTitle: null,
              headerBackTitleVisible: false,
              header: null,
            }),
          },
          EventsArchive: {
            path: 'events',
            screen: EventsArchiveScreen,
            navigationOptions: () => ({
              headerMode: 'screen',
              headerBackTitle: null,
            }),
          },
        })
      },
    })
  },
  Auth: {
    path: 'auth',
    screen: AuthNavigator,
  },
}))

【讨论】：