在React Navigation中移除DrawerNavigator里的AppStackNavigator菜单项

嘿，我仔细看了你的问题、示例和截图，这个需求其实很好实现，核心就是调整React Navigation里Drawer导航器的配置，完全不会影响你现有的菜单流程~

具体操作步骤： #

1. 找到你项目中定义Drawer Navigator的代码文件（通常是导航配置相关的文件，比如Navigation.js）
2. 在Drawer导航器的screens配置项里，找到对应AppStackNavigator的那一行代码，直接删除即可。

举个例子，你原来的Drawer配置可能长这样：

import { createDrawerNavigator } from '@react-navigation/drawer';
import AppStackNavigator from './AppStackNavigator';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';

const Drawer = createDrawerNavigator();

export default function MyDrawer() {
  return (
    <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Profile" component={ProfileScreen} />
      {/* 就是下面这一行需要删除 */}
      <Drawer.Screen name="AppStackNavigator" component={AppStackNavigator} />
    </Drawer.Navigator>
  );
}

修改后的代码就去掉那一行：

import { createDrawerNavigator } from '@react-navigation/drawer';
import AppStackNavigator from './AppStackNavigator';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';

const Drawer = createDrawerNavigator();

export default function MyDrawer() {
  return (
    <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Profile" component={ProfileScreen} />
      {/* 已移除AppStackNavigator的Drawer菜单项 */}
    </Drawer.Navigator>
  );
}

为什么这样可行？ #

• 移除这一行只是把AppStackNavigator从Drawer的菜单选项中剔除，并不会影响AppStackNavigator本身的功能。
• 如果你原来的业务流程中，是通过其他页面的导航跳转（比如从Home页面跳转到AppStack里的页面），这些跳转逻辑依然可以正常工作，完全不会受影响。

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