React Navigation设置默认屏幕失效：initialRouteName未生效求助

你遇到的initialRouteName="Login"未生效、默认显示Home屏幕的问题，大概率是以下几个原因导致的，逐一排查即可：

1. 存在登录状态自动跳转逻辑 #

检查导航栈所在的父组件（比如App.js），是否有根据登录状态动态切换初始路由的代码。例如：

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(true); // 初始状态错误设为true
  // 或从AsyncStorage/Redux等获取登录状态时，初始值判断错误

  return (
    <NavigationContainer>
      <Stack.Navigator 
        initialRouteName={isLoggedIn ? "Index" : "Login"} // 这里覆盖了你的设置
        screenOptions={{ headerShown: false }}
      >
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Index" component={Index} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

如果有这类逻辑，当isLoggedIn初始为true时，会强制将Index设为初始路由。需要确认登录状态的初始值是否正确（未登录时应为false），或者持久化存储的登录状态是否有误。

2. Index组件内部存在自动跳转 #

打开Index.js，检查是否在组件挂载时自动跳转到Home屏幕的代码：

import { useEffect } from 'react';

const Index = ({ navigation }) => {
  useEffect(() => {
    // 无条件跳转到Home，导致进入Index后直接跳转
    navigation.navigate('Home');
  }, [navigation]);

  return (
    // 仪表盘内容
  );
};

如果存在这种代码，即使初始路由是Login，但如果因为某些原因进入了Index，就会立即跳转到Home。需要给跳转添加条件判断（比如仅当用户已登录时跳转），或者移除该逻辑。

3. 导航栈组件映射或嵌套问题 #

注意到你的导航栈中只定义了Login和Index两个页面，但handleLogin中调用了navigation.navigate('Home')，说明Home可能是Index内部嵌套导航（比如TabNavigator）的页面。如果默认显示Home，可能是：

• 外层导航的初始路由实际是Index，而非Login（原因参考第1点）
• 嵌套导航的初始路由设为Home，导致进入Index后直接显示Home页面

4. 缓存导致配置未更新 #

React Native的缓存可能会保留旧的导航配置，执行以下命令清除缓存后重新构建：

# Android/iOS通用
npx react-native start --reset-cache

# iOS额外执行
npx pod-install

5. 存在initialState覆盖初始路由 #

检查NavigationContainer是否设置了initialState属性，该属性会优先于initialRouteName生效：

<NavigationContainer initialState={someSavedState}>
  ...
</NavigationContainer>

如果有，需要确认initialState中是否指定了初始路由为Index，或者移除该属性测试。

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