将 React 导航从 4.x 迁移到 6.x

Question

我有以下带抽屉的导航和 React 导航 4.x，需要迁移到版本 6.x，但未能成功。

我已经迁移了我的导入，因此它匹配 v6.x，并进行了相应的安装，但是我在尝试为 v6

创建完全相同的结构时遇到了困难

感谢任何帮助我寻找有关迁移的示例，但它们很少

  import { Dimensions } from "react-native";
  import { createStackNavigator } from "react-navigation-stack";
  import { createDrawerNavigator } from "react-navigation-drawer";
  import { createAppContainer } from "react-navigation";
  const { width, height } = Dimensions.get("window");

  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 */

  /* Vehicle Drawer START */
  const DrawerStackVehical = createStackNavigator(
    {
      Dashboard: { screen: Dashboard },
      PickUp: { screen: PickUp },
      RoadTrip: { screen: RoadTrip },
      Notifications: { screen: Notifications },
      NotificationsDetails: { screen: NotificationsDetails },
      RoadsideAssistance: { screen: RoadsideAssistance },
      HistoryDetails: { screen: HistoryDetails },
      History: { screen: History },
      TemperatureControl: { screen: TemperatureControl },
    },
    {
      headerMode: "none",
      navigationOptions: ({ navigation }) => ({
        gesturesEnabled: false,
      }),
    }
  );

  const DrawerNavigationVehical = createDrawerNavigator(
    {
      DrawerStackVehical: { screen: DrawerStackVehical },
    },
    {
      gesturesEnabled: false,
      contentComponent: VehicleSideMenu,
    }
  );

  const MainStack = createStackNavigator(
    {
      FirstScreen: { screen: FirstScreen },
    },
    {
      headerMode: "none",
      navigationOptions: {
        gesturesEnabled: false,
      },
    }
  );

  const PrimaryNav = createStackNavigator(
    {
      mainStack: { screen: MainStack },
      DrawerNavigationVehical: { screen: DrawerNavigationVehical },
    },

    {
      headerMode: "none",
      initialRouteName: "mainStack",
      gesturesEnabled: false,
    }
  );

  export default createAppContainer(PrimaryNav);

Answer 1

我会尽量涵盖所做的大部分更改。

堆栈导航如下完成

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

function DrawerStackVehical() {
  return (
    <NavigationContainer>
    <Stack.Navigator screenOptions={{headerShown: 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.Navigator>
    </NavigationContainer>
  );
}

抽屉导航

import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

const Drawer = createDrawerNavigator();

function DrawerNavigationVehical() {
  return (
   <NavigationContainer>
    <Drawer.Navigator>
      <Drawer.Screen name="DrawerStackVehical" component={DrawerStackVehical} />
      <Drawer.Screen name="Article" component={Article} />
    </Drawer.Navigator>
    </NavigationContainer>
  );
}

而且您现在不需要使用 createAppContainer。你只需要使用 'NavigationContainer` 并将您的组件包裹在里面。

将 React 导航从 4.x 迁移到 6.x

Migrate React Navigation from 4.x to 6.x

react-native

react-navigation