Expo/React Native中React Navigation条件式认证流页面切换失效问题求助

看起来你的核心问题是状态更新没有触发导航器的重新渲染——虽然userToken确实在登录/登出时正确变化了，但判断userToken的外层组件并没有订阅这个状态的更新，导致导航器的页面结构始终停留在初始渲染的状态。

问题根源 #

你当前的代码中，判断userToken的逻辑写在最外层组件里，但这个组件并没有通过useAuth()去订阅AuthContext的状态变化。当AuthProvider内部的userToken更新时，外层组件不会重新渲染，导航器自然不会切换对应的页面。

修复方案一：让导航器订阅状态变化 #

把导航器的条件渲染逻辑移到一个使用useAuth()的独立组件中，确保它能响应userToken的变化：

// 新建一个组件负责渲染导航栈
const AuthStack = () => {
  // 这里通过useAuth()订阅状态，userToken变化时组件会重新渲染
  const { userToken } = useAuth();

  return (
    <Stack.Navigator>
      {userToken ? (
        <Stack.Screen name="Home" component={HomeScreen} />
      ) : (
        <Stack.Screen name="SignIn" component={SignInScreen} options={{ headerShown: false }} />
      )}
    </Stack.Navigator>
  );
};

// 原来的外层组件修改为：
return (
  <ApolloProvider client={client}>
    <NavigationContainer>
      <AuthProvider>
        <AuthStack /> {/* 替换原来的Stack.Navigator */}
      </AuthProvider>
    </NavigationContainer>
  </ApolloProvider>
);

这样，当userToken更新时，AuthStack组件会重新渲染，导航器就能正确切换到对应的页面了。

修复方案二：使用导航器的主动跳转（官方推荐） #

React Navigation官方更推荐通过主动控制导航栈的方式实现认证流，而不是依赖条件渲染。这种方式更直观，也能避免状态订阅的问题：

登录页面（SignInScreen）：

const SignInScreen = ({ navigation }) => {
  const { signIn } = useAuth();

  const handleLogin = async () => {
    // 模拟你的登录逻辑，获取token
    const token = await yourLoginApiCall();
    
    // 更新认证状态
    await signIn(token);
    
    // 重置导航栈，跳转到首页（避免用户返回登录页）
    navigation.reset({
      index: 0,
      routes: [{ name: 'Home' }],
    });
  };

  return (
    <View>
      {/* 你的登录表单 */}
      <Button onPress={handleLogin} title="登录" />
    </View>
  );
};

首页（HomeScreen）：

const HomeScreen = ({ navigation }) => {
  const { signOut } = useAuth();

  const handleLogout = async () => {
    // 更新认证状态
    await signOut();
    
    // 重置导航栈，跳转到登录页
    navigation.reset({
      index: 0,
      routes: [{ name: 'SignIn' }],
    });
  };

  return (
    <View>
      {/* 你的首页内容 */}
      <Button onPress={handleLogout} title="登出" />
    </View>
  );
};

这种方式下，导航器的结构可以简化为固定的两个页面，不需要条件判断：

<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="SignIn" component={SignInScreen} options={{ headerShown: false }} />
</Stack.Navigator>

额外优化建议 #

你的signIn方法中，先dispatch更新状态再存储token的顺序可以调整一下——应该先确保token存储成功，再更新状态，避免存储失败但状态已更新的不一致情况：

signIn: async (token: string) => {
  await setToken(token); // 先存token
  dispatch({ type: 'SIGN_IN', token }); // 再更新状态
},

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