React Native Expo应用：抽屉导航与现有导航共存及组件导出问题

你的问题核心在于导航结构的嵌套关系错误——你把AppStack和DrawerNavigator作为createSwitchNavigator的同级选项了，这就导致它们只能二选一。正确的做法是把原有的栈导航嵌套进抽屉导航里，让抽屉作为App状态的主容器，同时保留栈导航的功能。

修改后的完整代码 #

import { createStackNavigator, createDrawerNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation';

// 确保你已经导入了所有需要的Screen组件：LoadingScreen、HomeScreen、UserScreen、LoginScreen、RegisterScreen、ProfileScreen、SettingsScreen

// 保留原有的AppStack（Home与Users的栈导航）
const AppStack = createStackNavigator(
  {
    Home: { screen: HomeScreen },
    Users: { screen: UserScreen }
  },
  { initialRouteName: "Home" }
);

// 重构抽屉导航：将AppStack作为Home选项的页面，替代原有的HomeScreen
const DrawerNavigator = createDrawerNavigator({
  Home: { screen: AppStack },
  Profile: { screen: ProfileScreen },
  Settings: { screen: SettingsScreen }
});

// 原有的AuthStack保持不变
const AuthStack = createStackNavigator({
  Login: LoginScreen,
  Register: RegisterScreen
});

// SwitchNavigator中，App项现在指向DrawerNavigator（而非原AppStack）
export default createAppContainer(
  createSwitchNavigator(
    {
      Loading: LoadingScreen,
      App: DrawerNavigator,
      Auth: AuthStack
    },
    { initialRouteName: "Loading" }
  )
);

为什么这样修改？ #

• 现在的结构是：SwitchNavigator（区分加载、登录、已登录状态）→ 已登录状态下加载DrawerNavigator → 抽屉中包含AppStack（Home+Users的栈）、Profile、Settings页面。
• 这样既保留了原有的栈导航功能（可以从Home页面跳转到Users页面），又能通过抽屉菜单在不同页面间切换，二者完美共存。

补充：添加抽屉触发按钮 #

如果需要在页面头部添加打开抽屉的按钮，可以在HomeScreen的navigationOptions中配置：

class HomeScreen extends Component {
  static navigationOptions = ({ navigation }) => {
    return {
      headerLeft: () => (
        <Button
          title="菜单"
          onPress={() => navigation.openDrawer()}
          style={{ marginLeft: 10 }}
        />
      )
    };
  };

  // 其他组件逻辑...
}

这样用户点击头部的"菜单"按钮，就能唤起抽屉菜单了。

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