如何通过反应导航深度链接到嵌套堆栈？

Question

我正在尝试通过使用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,
  },
}))

Answer 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,
  },
}))