Блог

У меня есть следующая навигация с ящиком, работающим с навигацией react 4.x, и мне нужно перейти на версию 6.x, но я не смог этого сделать.

Я уже перенес свой импорт, чтобы он соответствовал версии 6.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);
 

Я постараюсь осветить большинство внесенных изменений.

Навигация по стеку выполняется, как показано ниже

 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 сейчас. Вам просто нужно использовать
«Навигационный контейнер» и заверните свой компонент внутрь.