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

Question

我是 React Native 的新手，正在研究 React Navigation 5。在 React Navigation 4 中，在 createAppContainer 的帮助下，我们可以导入导航组件并在 app.js 中调用它。我们怎样才能用 React navigation 5 做同样的事情呢？这是我的代码//drawer Componentimport 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.jsimport 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.js

import React from "react";

import { NavigationContainer } from "@react-navigation/native";

import DrawerNavigator from "./navigation/DrawerNavigator";

const App = () => {

  return (

    <NavigationContainer>

      <DrawerNavigator />

    </NavigationContainer>

  );

};

export default App;

DrawerNavigator.js

// ./navigation/DrawerNavigator.js

import 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 = {

  headerStyle: {

    backgroundColor: "#9AC4F8",

  },

  headerTintColor: "white",

  headerBackTitle: "Back",

};

const ContactStackNavigator = () => {

  return (

    <Stack.Navigator screenOptions={screenOptionStyle}>

      <Stack.Screen name="Contact" component={Contact} />

    </Stack.Navigator>

  );

};        

const DrawerNavigator = () => {

  return (

    <Drawer.Navigator>

      <Drawer.Screen name="Contact" component={ContactStackNavigator} />

    </Drawer.Navigator>

  );

};

export default DrawerNavigator;