React Native Navigation设置默认屏幕异常：指定Welcome却显示Login

以下是几个常见的原因及解决方法：

• 缓存残留导致配置未更新
  React Native的Metro缓存可能会保留旧的路由配置，导致新的initialRouteName设置不生效。执行以下命令清除缓存后重新运行项目：

  npx react-native start --reset-cache
  

• 组件导入路径错误
  检查Login和Welcome组件的导入语句，确认是否不小心将两个组件的路径搞反。比如错误地写成：

  import Login from './src/screens/Welcome';
  import Welcome from './src/screens/Login';
  

  这种情况下，name='Welcome'对应的实际是Login组件，就会出现启动显示Login页面的假象。

• 存在自动跳转的业务逻辑
  检查Welcome、Login组件内部，或者NavigationContainer外层的代码，是否有基于登录状态的自动跳转逻辑。比如从AsyncStorage读取登录凭证后，直接跳转到Login页面：

  useEffect(() => {
    const checkAuthStatus = async () => {
      const token = await AsyncStorage.getItem('userToken');
      if (!token) {
        navigation.navigate('Login');
      }
    };
    checkAuthStatus();
  }, [navigation]);
  

  这类逻辑会直接覆盖initialRouteName的默认设置，导致启动后自动跳转到Login。

• 临时验证：确认路由与组件的对应关系
  可以在两个组件中添加明显的标识文本，快速排查是否是路由匹配问题：

  // Welcome组件
  export default function Welcome() {
    return <Text>这是Welcome页面</Text>;
  }
  
  // Login组件
  export default function Login() {
    return <Text>这是Login页面</Text>;
  }
  

  重新运行后，看显示的文本是否和路由配置一致，以此判断是路由配置问题还是组件显示问题。

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