登錄后反應從堆棧屏幕導航到抽屜導航的本機切換

Question

我有幾個設置了堆棧導航器的屏幕（登錄、注冊、忘記密碼等）。有沒有辦法在用戶登錄后用抽屜導航器替換這些堆棧屏幕，並在用戶登錄后將其設置回 false（堆棧導航）登出？ 如果我在 App.js 中手動更改 state，則下面的代碼有效。 我想通過全局 state 來做到這一點，但我想知道是否有更簡單的方法來做到這一點。 請注意，我是初學者:) 謝謝

應用程序.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>
  );
}

抽屜Nav

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;

授權棧

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

如果有人遇到這個問題，我已經設法通過在我的堆棧屏幕主頁組件中添加我的 DrawerNav 組件來解決它，現在它運行良好。

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;