我正在使用react创建一个应用程序，并使用ReactContext创建了一个登录系统，其中有一个名为userToken的变量，允许用户从登录的stackNavigator更改为主应用程序的stackNavigator，因为我创建了一个包含一些登录屏幕的堆栈和另一个包含其他屏幕的堆栈。当点击位于登录页面的按钮时，它应该改变变量的值并改变屏幕，但不知何故它不起作用。
这是React上下文

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");
  };

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

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

下面是在变量更改时负责更改屏幕的导航器

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();

function AppNav() {
  const userToken = useContext(AppContext);
  return (
    <Context>
      <NavigationContainer>
        {userToken == null ? <AuthStack /> : <AppStack />}
      </NavigationContainer>
    </Context>
  );
}

export default AppNav;

这就是我在按下按钮后在登录屏幕中调用react上下文的方式。

<CustomButton label={"Login"} onPress={() => login()} />

我的问题是，一旦我在登录屏幕中单击此按钮，变量“userToken”的值就会更改，但三元运算符似乎不起作用，并且它不会更改堆栈，因此用户可以在userToken更改时看到Appstack。我尝试了三元运算符的不同变体。我认为错误是因为它只执行一次。
我该怎么补救呢？