我们如何在另一个组件中创建抽屉导航并在 app.js 中调用它

Question

我是 React Native 的新手，正在研究 React Navigation 5。在 React Navigation 4 中，在 createAppContainer 的帮助下，我们可以导入导航组件并在 app.js 中调用它。我们怎样才能用 React navigation 5 做同样的事情呢？

这是我的代码

//drawer Component

import AccountsScreen from "../screens/AccountsScreen";

import CategoriesScreen from "../screens/CategoriesScreen";

import FavouritesScreen from "../screens/FavouritesScreen";

import HomeScreen from "../screens/HomeScreen";

import SettingsScreen from "../screens/SettingsScreen";

import TrendsScreen from "../screens/TrendsScreen";

import { MaterialCommunityIcons } from "@expo/vector-icons";

const Drawer = createDrawerNavigator();

const AppDrawer = () => {

  return (

    <NavigationContainer>

      <Drawer.Navigator

        initialRouteName="Home"

        drawerContentOptions={{

          activeTintColor: "#555",

        }}

      >

        <Drawer.Screen

          name="Home"

          component={HomeScreen}

          options={{

            drawerIcon: ({ focused, color, size }) => (

              <MaterialCommunityIcons

                style={{ fontSize: size, color: color }}

                name={focused ? "home" : "home-outline"}

              />

            ),

          }}

        />

        <Drawer.Screen name="Accounts" component={AccountsScreen} />

        <Drawer.Screen name="Categories" component={CategoriesScreen} />

        <Drawer.Screen name="Trends" component={TrendsScreen} />

        <Drawer.Screen name="Favourites" component={FavouritesScreen} />

        <Drawer.Screen name="Settings" component={SettingsScreen} />

      </Drawer.Navigator>

      </NavigationContainer>

  );

};

export default AppDrawer;

//App.js

import React from "react";

import "react-native-gesture-handler";

import { createDrawerNavigator } from "@react-navigation/drawer";

import AppDrawer from "./route/AppDrawer";

const Drawer = createDrawerNavigator();

export default function App() {

  return <AppDrawer />;

}

Answer 1

尝试这样做应用程序.js// ./App.jsimport React from "react";import { NavigationContainer } from "@react-navigation/native";import DrawerNavigator from "./navigation/DrawerNavigator";const App = () => {&nbsp; return (&nbsp; &nbsp; <NavigationContainer>&nbsp; &nbsp; &nbsp; <DrawerNavigator />&nbsp; &nbsp; </NavigationContainer>&nbsp; );};export default App;DrawerNavigator.js// ./navigation/DrawerNavigator.jsimport React from "react";import { createStackNavigator } from "@react-navigation/stack";import { createDrawerNavigator } from "@react-navigation/drawer";import Contact from "../screens/Contact";const Stack = createStackNavigator();const Drawer = createDrawerNavigator();const screenOptionStyle = {&nbsp; headerStyle: {&nbsp; &nbsp; backgroundColor: "#9AC4F8",&nbsp; },&nbsp; headerTintColor: "white",&nbsp; headerBackTitle: "Back",};const ContactStackNavigator = () => {&nbsp; return (&nbsp; &nbsp; <Stack.Navigator screenOptions={screenOptionStyle}>&nbsp; &nbsp; &nbsp; <Stack.Screen name="Contact" component={Contact} />&nbsp; &nbsp; </Stack.Navigator>&nbsp; );};&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;const DrawerNavigator = () => {&nbsp; return (&nbsp; &nbsp; <Drawer.Navigator>&nbsp; &nbsp; &nbsp; <Drawer.Screen name="Contact" component={ContactStackNavigator} />&nbsp; &nbsp; </Drawer.Navigator>&nbsp; );};export default DrawerNavigator;