React Navigation：如何基于AuthContext状态强制跳转角色选择页并禁用返回？

核心问题分析 #

你当前用navigation.navigate()跳转时，是把ROLE_SELECTION页面追加到导航栈里，栈结构变成Login -> ROLE_SELECTION，所以用户点击返回会回到Login页面。要解决这个问题，需要修改导航栈的操作逻辑，同时全局统一处理状态监听，避免重复代码。

具体实现步骤 #

1. 替换导航方法：用replace替代navigate #

把Login和Signup页面里的navigation.navigate()改成navigation.replace()，这样会直接用ROLE_SELECTION替换栈中的当前页面（比如Login），导航栈会变成只有ROLE_SELECTION，用户点击返回就会直接退出App，而不会回到Login。

修改后的Login页面代码：

const Login = ({navigation}) => {
  ...
  const {roleSelected} = useContext(AuthContext);

  useEffect(() => {
    if (!roleSelected) {
      navigation.replace(routes.ROLE_SELECTION);
    }
  }, [navigation, roleSelected]); // 必须把roleSelected加入依赖，否则状态变化时不会重新触发
}

2. 全局统一监听状态（推荐） #

不用在每个页面单独写useEffect，可以在导航容器外层统一监听roleSelected的变化，确保无论用户在哪个页面，只要状态为false就强制跳转：

import { useNavigation } from '@react-navigation/native';

const App = () => {
  const { roleSelected } = useContext(AuthContext);
  const navigation = useNavigation();

  useEffect(() => {
    if (!roleSelected) {
      navigation.replace(routes.ROLE_SELECTION);
    }
  }, [navigation, roleSelected]);

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name={routes.LOGIN} component={Login} />
        <Stack.Screen name={routes.SIGNUP} component={Signup} />
        <Stack.Screen name={routes.ROLE_SELECTION} component={Role} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

3. 隐藏ROLE_SELECTION页面的返回按钮 #

为了彻底避免用户返回，在Role组件里隐藏头部的返回按钮：

import { useLayoutEffect } from 'react';

const Role = ({navigation}) => {
  // 隐藏返回按钮
  useLayoutEffect(() => {
    navigation.setOptions({
      headerLeft: () => null,
    });
  }, [navigation]);

  // 角色选择逻辑，选择后设置roleSelected为true
  const handleRoleSelect = () => {
    // 调用AuthContext里的setRoleSelected(true)
    setRoleSelected(true);
    // 跳转回Login或其他页面
    navigation.navigate(routes.LOGIN);
  };

  return (
    // 你的角色选择UI
  );
};

额外说明 #

当用户在Role页面完成角色选择后，调用setRoleSelected(true)，此时全局监听会停止触发跳转，用户可以正常使用Login、Signup页面，不会再被强制跳转。

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