Question

我的导航方案是：

const App = () => <AppNavigator />;

const AppNavigator = createSwitchNavigator({
  splash: SplashScreen,
  auth: () => <AuthStack uriPrefix={`${prefix}auth/`} />,
  main: () => <MainDrawer uriPrefix={`${prefix}main/`} />,
});

const AuthStack = createStackNavigator({
  landing: LandingScreen,
  login: {
    screen: LoginScreen,
    path: 'login',
  },
  register: {
    screen: RegisterScreen,
    path: 'signup',
  },
});

const MainDrawer = createDrawerNavigator({
  Home: {
    screen: HomeStack,
    path: 'home',
  },
  Upsell: {
    screen: UpsellScreen,
    path: 'upsell',
  },
});

使用上述方案，深层链接可以正常运行，但可以进行常规导航，例如从login到main。 this.props.navigation.navigate('main')无法正常工作。

在SpashScreen中，正在下载配置数据并检查了授权，如果失败，用户将无法访问main。

我已经确定问题出在SwitchNavigator上，以及如何定义auth和main。将它们更改为

auth: AuthStack,
main: MainDrawer,

使常规导航有效，但深层链接无法实现。

如何解决此问题？

Answer 1

您可以尝试将uriPrefix移到将路径的main和auth前缀分隔开的根部分吗？

const App = () => <AppNavigator uriPrefix={prefix} />;

const AppNavigator = createSwitchNavigator({
  splash: SplashScreen,
  auth: AuthStack,
  main: MainDrawer,
});

const AuthStack = createStackNavigator({
  landing: LandingScreen,
  login: {
    screen: LoginScreen,
    path: 'auth/login',
  },
  register: {
    screen: RegisterScreen,
    path: 'auth/signup',
  },
});

const MainDrawer = createDrawerNavigator({
  Home: {
    screen: HomeStack,
    path: 'main/home',
  },
  Upsell: {
    screen: UpsellScreen,
    path: 'main/upsell',
  },
});

与嵌套导航器进行深度链接后，常规导航将不起作用

1 个答案: