React Context值变更后未触发Stack Navigator页面切换的修复方案

核心问题 #

1. Context作用域错误：AppNav组件中调用useContext(AppContext)时，组件还未被Context.Provider包裹，无法获取到Provider提供的实时userToken值，只能拿到createContext()的默认值（undefined），因此后续userToken更新时无法触发组件重新渲染。
2. Context值解构错误：即使作用域正确，原代码中const userToken = useContext(AppContext)拿到的是整个上下文对象（包含login、logout、userToken），而非单独的userToken属性，导致判断逻辑错误。

修复步骤 #

步骤1：调整导航器组件结构，确保useContext在Provider作用域内 #

将页面栈切换逻辑抽离到Provider包裹的子组件中，让useContext能感知到userToken的变化：

import { FA5Style } from "@expo/vector-icons/build/FontAwesome5";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { useContext } from "react";
import { AppContext, Context } from "../Contexts/Context";
import AppStack from "../Navigation/AppStack";
import AuthStack from "../Navigation/AuthStack";
import BottomNavBar from "../Navigation/BottomNavBar";

const MainNav = createNativeStackNavigator();

// 抽离栈切换逻辑到子组件，确保在Provider作用域内
function StackSwitcher() {
  // 正确解构获取userToken
  const { userToken } = useContext(AppContext);
  return userToken == null ? <AuthStack /> : <AppStack />;
}

function AppNav() {
  return (
    <Context>
      <NavigationContainer>
        <StackSwitcher />
      </NavigationContainer>
    </Context>
  );
}

export default AppNav;

步骤2：确保登录页面正确获取login函数 #

在登录页面组件中，需要从Context中获取login函数，避免调用未定义的函数：

import { useContext } from "react";
import { AppContext } from "../Contexts/Context";
import CustomButton from "./CustomButton";

function LoginScreen() {
  const { login } = useContext(AppContext);
  
  return (
    <CustomButton label="Login" onPress={login} />
  );
}

export default LoginScreen;

步骤3：验证Context逻辑（可选） #

确认Context中的login函数正确更新userToken：

import React, { useState } from "react";

export const AppContext = React.createContext();

export function Context({ children }) {
  const [userToken, setUserToken] = useState(null);
  const [isLoading, setisLoading] = useState(false);

  const login = () => {
    setisLoading(false);
    setUserToken("iojoiajsdoijaso");
    console.log("userToken updated:", userToken); // 可添加日志验证
  };

  const logout = () => {
    setisLoading(false);
    setUserToken(null);
  };

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

原理说明 #

当userToken通过login函数更新后，Context.Provider会通知所有在其作用域内使用useContext(AppContext)的组件重新渲染，StackSwitcher组件感知到userToken变化后，会触发三元运算符的重新判断，从而完成页面栈的切换。

内容的提问来源于stack exchange，提问作者Aissa Rouk