React Native Expo引导页（Onboarding）不显示，需每次重启展示

1. 确认路由文件结构与命名 #

确保文件结构完全匹配路由路径：

app/
├── _layout.tsx
├── (auth)/
│   └── onboarding.tsx
└── (tabs)/
    ├── _layout.tsx
    ├── index.tsx
    └── ...其他标签页

• 文件名严格区分大小写，比如onboarding.tsx不能写成Onboarding.tsx，否则路由路径"(auth)/onboarding"无法匹配。
• (auth)和(tabs)是路由组，必须用括号包裹，确保Expo Router识别为分组路由。

2. 修正根布局_layout.tsx的配置 #

确保根Stack导航配置正确，明确声明所有需要的路由，并且initialRouteName指向正确路径：

// app/_layout.tsx
import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack
      initialRouteName="(auth)/onboarding"
      screenOptions={{ headerShown: false }}
    >
      {/* 明确声明引导页路由 */}
      <Stack.Screen name="(auth)/onboarding" />
      {/* 声明标签栏路由 */}
      <Stack.Screen name="(tabs)" />
    </Stack>
  );
}

• 如果注释掉<Stack.Screen name="(tabs)" />后仍显示标签栏，检查app/目录下是否有index.tsx文件——Expo Router会自动将根目录的index.tsx作为默认初始路由，优先级高于你设置的initialRouteName，如果有，直接删除或重命名该文件。

3. 排查自动跳转逻辑 #

检查是否有代码在应用启动时自动跳转到标签栏：

• 查看根布局_layout.tsx或引导页onboarding.tsx中是否有useEffect或类似逻辑，通过useRouter()或useNavigation()自动跳转路由，比如：

  // 错误示例：这种逻辑会覆盖initialRouteName
  useEffect(() => {
    const isLoggedIn = await checkLoginStatus();
    if (isLoggedIn) {
      router.push('/(tabs)');
    }
  }, []);
  

• 如果之前用SecureStore、AsyncStorage等保存过登录状态，先清空这些存储的数据，再测试引导页是否正常显示。

4. 彻底清除缓存 #

除了执行npx expo start -c，还需要：

• iOS模拟器：删除APP后重新运行；或通过Hardware > Erase All Content and Settings重置模拟器。
• Android模拟器/真机：进入应用设置，清除应用数据和缓存，再重新安装。

5. 验证引导页跳转逻辑 #

确保引导页的“注册/登录”按钮跳转代码正确：

// onboarding.tsx
import { useRouter } from 'expo-router';

export default function Onboarding() {
  const router = useRouter();

  const handleAuth = () => {
    // 跳转到标签栏路由
    router.push('/(tabs)');
    // 如果需要持久化登录状态，在这里添加存储逻辑
  };

  return (
    <button onClick={handleAuth}>注册/登录</button>
  );
}

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