登录后反应从堆栈屏幕导航到抽屉导航的本机切换

Question

I have a few screens set with stack navigator (Login, register, forgot password, etc..) is there a way to replace those stack screens with drawer navigator after the user login and set it back to false(stack navigation) after the user logout? The code below is working if I change the state manually in App.js. I was thinking to do it through global state, but I want to know if there is an easier way to do this. Please note that I am beginner:) Thanks

App.js

import { NavigationContainer } from "@react-navigation/native";
import AuthStack from "./app/routes/AuthStack";
import DrawerNav from "./app/routes/DrawerNav";
import { useState } from "react";

export default function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <NavigationContainer>
      {isLoggedIn ? <DrawerNav /> : <AuthStack />}
    </NavigationContainer>
  );
}

DrawerNav

import React from "react";
import { createDrawerNavigator } from "@react-navigation/drawer";
import Home from "../screens/Home";
import Profile from "../DrawerScreens/Profile";
import Messages from "../DrawerScreens/Messages";

function DrawerNav(props) {
  const Drawer = createDrawerNavigator();

  return (
    <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="Home" component={Home} />
      <Drawer.Screen name="Profile" component={Profile} />
      <Drawer.Screen name="Messages" component={Messages} />
    </Drawer.Navigator>
  );
}

export default DrawerNav;

AuthStack

import React from "react";
import WelcomeScreen from "../screens/WelcomeScreen";
import Register from "../screens/Register";
import Login from "../screens/Login";
import ConfirmEmailScreen from "../screens/ConfirmEmailScreen";
import ForgotPasswordScreen from "../screens/ForgotPasswordScreen";
import NewPasswordScreen from "../screens/NewPasswordScreen";
import Home from "../screens/Home";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

const Stack = createNativeStackNavigator();

const AuthStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Welcome"
        component={WelcomeScreen}
        options={{ headerShown: false }}
      />
      <Stack.Screen name="Register" component={Register} />
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen name="Confirm Email" component={ConfirmEmailScreen} />
      <Stack.Screen name="Forgot Password" component={ForgotPasswordScreen} />
      <Stack.Screen name="New Password" component={NewPasswordScreen} />
      <Stack.Screen
        name="Home"
        component={Home}
        headerLeft={null}
        gestureEnabled={false}
        options={{ headerShown: false }}
      />
    </Stack.Navigator>
  );
};

Answer 1

If anyone have this problem I have managed to solve it by adding my DrawerNav component inside my stack screen Home component and now it's working perfectly.

import React from "react";
import WelcomeScreen from "../screens/WelcomeScreen";
import Register from "../screens/Register";
import Login from "../screens/Login";
import ConfirmEmailScreen from "../screens/ConfirmEmailScreen";
import ForgotPasswordScreen from "../screens/ForgotPasswordScreen";
import NewPasswordScreen from "../screens/NewPasswordScreen";
import DrawerNav from "./DrawerNav";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

const Stack = createNativeStackNavigator();

const AuthStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Welcome"
        component={WelcomeScreen}
        options={{ headerShown: false }}
      />
      <Stack.Screen name="Register" component={Register} />
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen name="Confirm Email" component={ConfirmEmailScreen} />
      <Stack.Screen name="Forgot Password" component={ForgotPasswordScreen} />
      <Stack.Screen name="New Password" component={NewPasswordScreen} />
      <Stack.Screen
        name="Home"
        component={DrawerNav}      // This is where I added DrawerNav         
        headerLeft={null}
        gestureEnabled={false}
        options={{ headerShown: false }}
      />
    </Stack.Navigator>
  );
};

export default AuthStack;