如何使用反应原生深度链接到嵌套堆栈?

Question

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

我的应用程序使用一堆 React Native、redux、redux 导航和 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,
},
}))