DrawerNavigator打开时自动跳转至首个路由问题求助

你遇到的核心问题是导航结构配置逻辑出错了——你的SwitchNavigator同时放了AppNavigator和DrawerNavigator两个平级的导航器，而SwitchNavigator的特性是同一时间只会激活一个子导航器。当你在AppNavigator的HomeScreen里调用DrawerActions.openDrawer()时，这个指令会触发SwitchNavigator切换到DrawerNavigator，而DrawerNavigator默认会加载第一个定义的路由MyAccount，所以就自动跳转到了这个页面。

修复方案：重构导航层级 #

正确的做法是把DrawerNavigator作为登录后的主导航容器，将HomeScreen和MyAccountScreen都纳入它的层级下，再把这个整合后的DrawerNavigator作为SwitchNavigator的登录后入口。修改后的代码如下：

// AppContainer.js
const AuthNavigator = createStackNavigator(...code);

// 可选：如果需要给Home/MyAccount单独配置子页面，可以先创建对应Stack
const HomeStack = createStackNavigator({
  Home: HomeScreen,
  // 这里可以添加Home相关的其他子屏幕
});

const MyAccountStack = createStackNavigator({
  MyAccount: MyAccountScreen,
  // 这里可以添加账户相关的其他子屏幕
});

// 创建Drawer导航器，包含需要在抽屉中切换的页面/Stack
const DrawerNavigator = createDrawerNavigator({
  Home: HomeStack,
  MyAccount: MyAccountStack,
});

// SwitchNavigator仅保留Auth和主Drawer导航器
const AppContainer = createAppContainer(
  createSwitchNavigator(
    {
      AuthNavigator,
      Main: DrawerNavigator,
    },
    {
      initialRouteName: AuthNavigator,
    }
  )
);

关键说明 #

• 调整后，用户登录后进入的是DrawerNavigator，所有页面都处于抽屉导航的上下文内
• 此时在HomeScreen里调用onPress={() => this.props.navigation.dispatch(DrawerActions.openDrawer())}，是直接操作当前激活的DrawerNavigator，只会触发抽屉弹窗打开，不会触发导航器切换，也就不会自动跳转到MyAccountScreen了

内容的提问来源于stack exchange，提问作者Angel Luis