React Native：登录后从Stack导航切换至Drawer导航的简便方法

你的思路完全可行，下面给你两种适合React Native新手的简便实现方式，无需复杂的全局状态库：

方案一：用React Context管理全局登录状态 #

这种方式能让所有组件轻松访问和修改登录状态，比单独的useState更灵活：

1. 创建全局Context文件 app/contexts/AuthContext.js

import { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // 登录方法，后续可补充API请求逻辑
  const login = () => {
    setIsLoggedIn(true);
  };

  // 登出方法
  const logout = () => {
    setIsLoggedIn(false);
  };

  return (
    <AuthContext.Provider value={{ isLoggedIn, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

// 自定义Hook，简化组件调用
export function useAuth() {
  return useContext(AuthContext);
}

2. 修改App.js，用AuthProvider包裹导航容器

import { NavigationContainer } from "@react-navigation/native";
import AuthStack from "./app/routes/AuthStack";
import DrawerNav from "./app/routes/DrawerNav";
import { AuthProvider, useAuth } from "./app/contexts/AuthContext";

// 抽离导航逻辑到子组件
function NavigationWrapper() {
  const { isLoggedIn } = useAuth();
  return (
    <NavigationContainer>
      {isLoggedIn ? <DrawerNav /> : <AuthStack />}
    </NavigationContainer>
  );
}

export default function App() {
  return (
    <AuthProvider>
      <NavigationWrapper />
    </AuthProvider>
  );
}

3. 在Login页面调用登录方法
   登录请求成功后触发状态切换：

import { useAuth } from '../contexts/AuthContext';

function Login() {
  const { login } = useAuth();

  const handleLogin = () => {
    // 这里编写登录API请求逻辑
    // 请求成功后调用login切换状态
    login();
  };

  return (
    // 你的登录UI
    <Button title="登录" onPress={handleLogin} />
  );
}

4. 在Drawer页面（比如Profile）添加登出按钮

import { useAuth } from '../contexts/AuthContext';

function Profile() {
  const { logout } = useAuth();

  return (
    <Button title="登出" onPress={logout} />
  );
}

方案二：结合AsyncStorage持久化登录状态 #

上面的方案在APP重启后会回到未登录状态，加上AsyncStorage可以保存登录状态，更贴近真实场景：

修改AuthContext.js，初始化时读取本地存储：

import { createContext, useContext, useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // 初始化时读取本地存储的登录状态
  useEffect(() => {
    const checkLoginStatus = async () => {
      const status = await AsyncStorage.getItem('isLoggedIn');
      if (status === 'true') {
        setIsLoggedIn(true);
      }
    };
    checkLoginStatus();
  }, []);

  const login = async () => {
    setIsLoggedIn(true);
    await AsyncStorage.setItem('isLoggedIn', 'true');
  };

  const logout = async () => {
    setIsLoggedIn(false);
    await AsyncStorage.removeItem('isLoggedIn');
  };

  return (
    <AuthContext.Provider value={{ isLoggedIn, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  return useContext(AuthContext);
}

额外优化建议 #

• 你的AuthStack里包含了Home页面，登录后应直接切换到DrawerNav的Home，建议删除AuthStack中的Home路由，避免导航混乱。
• 登录/登出时可添加loading状态，比如在AuthContext里增加isLoading状态，初始化时显示加载动画，提升用户体验。

内容的提问来源于stack exchange，提问作者Sin Lap