Expo Router Stack Screen加载顺序异常问题求助

问题核心原因 #

你的代码存在两个关键错误导致Login页面无法优先加载：

1. Stack.Screen的name与实际文件路径不匹配：Login页面位于screens/Login.tsx，但你在RootLayoutNav里将Stack.Screen的name设为"Login"，Expo Router无法匹配到正确的路由组件，因此 fallback 加载了(tabs)页面。
2. 未明确指定初始路由：虽然你调整了Stack的排列顺序，但Expo Router默认会优先加载文件系统中定义的根路由（如(tabs)这类分组路由），必须显式配置初始路由才能覆盖默认行为。

修复步骤 #

1. 修正Stack.Screen的name匹配文件路径 #

在_layout.tsx的RootLayoutNav函数中，将Login对应的Stack.Screen的name改为screens/Login，与文件路径一致：

function RootLayoutNav() {
  const colorScheme = useColorScheme();

  return (
    <>
      <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
        <Stack>
          {/* 修正name为screens/Login，匹配文件路径 */}
          <Stack.Screen name="screens/Login" options={{ title: 'Log in' }} />
          <Stack.Screen name="screens/Mylistings" options={{ title: 'Log in' }} />
          <Stack.Screen name="screens/Signup" options={{ title: 'Sign Up' }} />
          <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        </Stack>
      </ThemeProvider>
    </>
  );
}

2. 显式配置初始路由 #

取消_layout.tsx中unstable_settings的注释，并将initialRouteName设置为screens/Login：

export const unstable_settings = {
  initialRouteName: 'screens/Login',
};

3. 移除Login组件内的错误Stack.Screen配置 #

在Login.tsx中，组件内部不能直接放置<Stack.Screen />，这会导致路由配置混乱。将这一行删除，并通过_layout中的Stack.Screen的options来设置页面标题：

// 移除Login.tsx中的这一行
// <Stack.Screen options={{ title: 'Oops!' }} />

如果需要动态修改Login页面的标题，可以在Login.tsx中使用useNavigation钩子：

import { useNavigation } from 'expo-router';

const SignInPage = () => {
  const navigation = useNavigation();
  
  useEffect(() => {
    navigation.setOptions({ title: 'Oops!' });
  }, []);
  
  // ... 其余代码
};

额外验证 #

• 确认你的文件结构符合Expo Router规范：

  app/
    _layout.tsx
    (tabs)/
      ...
    screens/
      Login.tsx
      Signup.tsx
      Mylistings.tsx
  

• 重新启动Expo项目，确保缓存已完全清除（可以使用expo start -c命令）。

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