React Navigation 4.x抽屉导航迁移至6.x的结构搭建问题

React Navigation 4.x 抽屉导航迁移至 6.x 完整适配方案 #

以下是和你原有4.x结构完全一致的6.x实现代码：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
// 原有屏幕导入保持不变
import FirstScreen from "../Containers/Mainscreens/MainScreen/MainScreen";
/* Vehicle List START */
import PickUp from "../Containers/Vehicle/PickUp/index";
import VehicleSideMenu from "../Containers/Vehicle/SideMenu/SideMenu";
import Dashboard from "../Containers/Vehicle/Dashboard/index";
import RoadTrip from "../Containers/Vehicle/RoadTrip/index";
import Notifications from "../Containers/Vehicle/Notifications/index";
import NotificationsDetails from "../Containers/Vehicle/NotificationsDetails/index";
import History from "../Containers/Vehicle/History/index";
import HistoryDetails from "../Containers/Vehicle/HistoryDetails/index";
import RoadsideAssistance from "../Containers/Vehicle/RoadsideAssistance/index";
import TemperatureControl from "../Containers/Vehicle/TemperatureControl/index";
/* Vehicle List END */

// 初始化导航实例
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

// 车辆内部栈，对应原DrawerStackVehical
function VehicleStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
        gestureEnabled: false
      }}
    >
      <Stack.Screen name="Dashboard" component={Dashboard} />
      <Stack.Screen name="PickUp" component={PickUp} />
      <Stack.Screen name="RoadTrip" component={RoadTrip} />
      <Stack.Screen name="Notifications" component={Notifications} />
      <Stack.Screen name="NotificationsDetails" component={NotificationsDetails} />
      <Stack.Screen name="RoadsideAssistance" component={RoadsideAssistance} />
      <Stack.Screen name="HistoryDetails" component={HistoryDetails} />
      <Stack.Screen name="History" component={History} />
      <Stack.Screen name="TemperatureControl" component={TemperatureControl} />
    </Stack.Navigator>
  )
}

// 抽屉导航，对应原DrawerNavigationVehical
function VehicleDrawer() {
  return (
    <Drawer.Navigator
      screenOptions={{
        gestureEnabled: false
      }}
      drawerContent={(props) => <VehicleSideMenu {...props} />}
    >
      <Drawer.Screen name="DrawerStackVehical" component={VehicleStack} />
    </Drawer.Navigator>
  )
}

// 主栈，对应原MainStack
function MainStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
        gestureEnabled: false
      }}
    >
      <Stack.Screen name="FirstScreen" component={FirstScreen} />
    </Stack.Navigator>
  )
}

// 根导航，对应原PrimaryNav
function RootNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="mainStack"
        screenOptions={{
          headerShown: false,
          gestureEnabled: false
        }}
      >
        <Stack.Screen name="mainStack" component={MainStack} />
        <Stack.Screen name="DrawerNavigationVehical" component={VehicleDrawer} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

export default RootNavigator;

核心适配点说明 #

• 容器替换：原createAppContainer废弃，所有导航逻辑必须包裹在NavigationContainer组件内部，作为根导航的外层容器。
• 声明方式调整：不再使用对象参数传入路由配置，改为先调用createStackNavigator/createDrawerNavigator创建导航实例，再通过Navigator、Screen组件声明路由。
• 配置项映射：
  • 原headerMode: 'none'替换为screenOptions中配置headerShown: false
  • 原navigationOptions中的gesturesEnabled替换为screenOptions中配置gestureEnabled: false
  • 抽屉自定义内容原contentComponent属性替换为drawerContent属性，直接传入渲染函数即可
  • 初始路由配置initialRouteName保留，直接挂载到对应Navigator组件的属性上
• 跳转逻辑兼容：原有路由跳转写法navigation.navigate('路由名')无需调整，抽屉打开/关闭方法navigation.openDrawer()/navigation.closeDrawer()也保持原有用法。

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