Expo应用引导屏异常：启动先显首页再跳转问题求助

问题描述 #

新安装应用启动时，未直接进入引导屏（Onboard Screen），而是先显示首页，随后突然跳转到引导屏，不符合直接展示引导屏的预期。

问题原因 #

1. 初始路由强制默认首页：unstable_settings中设置了initialRouteName: "/"，导致Expo Router启动时优先加载首页路由，跳过了引导屏的判断逻辑。
2. 路由栈不完整：RootLayoutNav的Stack组件仅注册了(app)首页栈，未包含(onboard)引导屏栈，初始渲染时直接渲染首页，后续通过router.replace跳转时出现闪屏。

解决方案 #

步骤1：移除默认初始路由配置 #

删除unstable_settings中的initialRouteName，让异步检查逻辑（AsyncStorage+字体加载）决定最终路由，避免强制加载首页。

步骤2：注册完整路由栈 #

在RootLayoutNav中同时添加(onboard)和(app)两个路由栈，确保Expo Router能识别引导屏路由。

步骤3：保持启动加载状态直到路由确定 #

保留现有代码中if (!loaded || !onBoardingChecked) { return null; }的逻辑，确保SplashScreen在路由确定前一直显示，不提前渲染任何页面。

修改后的完整代码 #

import FontAwesome from "@expo/vector-icons/FontAwesome";
import { useFonts } from "expo-font";
import { Stack, useRouter } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import { useEffect, useState } from "react";
import "react-native-reanimated";
import Providers from "@/redux/provider";
import AsyncStorage from "@react-native-async-storage/async-storage";

export {
  ErrorBoundary,
} from "expo-router";

// 移除默认初始路由，由逻辑动态决定
export const unstable_settings = {};

SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [loaded, error] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
    ...FontAwesome.font,
  });

  const [onBoardingChecked, setOnBoardingChecked] = useState(false);
  const [initialRoute, setInitialRoute] = useState("/(onboard)/onboard");
  const router = useRouter();

  useEffect(() => {
    const checkOnboardingStatus = async () => {
      try {
        const onBoardSeenData = await AsyncStorage.getItem("inkwellAppData");
        const parsedData = onBoardSeenData !== null ? JSON.parse(onBoardSeenData) : null;
        const onboardSeenStatus = parsedData !== null ? parsedData?.onboardSeen : null;
        
        // 根据状态直接设置目标路由
        setInitialRoute(onboardSeenStatus ? "/" : "/(onboard)/onboard");
      } catch (error) {
        console.error("Failed to load onboarding status:", error);
      } finally {
        setOnBoardingChecked(true);
      }
    };

    checkOnboardingStatus();
  }, []);

  useEffect(() => {
    if (error) throw error;
  }, [error]);

  useEffect(() => {
    if (loaded && onBoardingChecked) {
      router.replace(initialRoute);
      SplashScreen.hideAsync();
    }
  }, [loaded, onBoardingChecked, initialRoute]);

  // 未完成加载/检查前，保持SplashScreen显示
  if (!loaded || !onBoardingChecked) {
    return null;
  }
  return <RootLayoutNav />;
}

function RootLayoutNav() {
  return (
    <Providers>
        <Stack screenOptions={{headerShown:false}}>
          {/* 注册引导屏路由栈 */}
          <Stack.Screen name="(onboard)" options={{ headerShown: false }} />
          <Stack.Screen name="(app)" options={{ headerShown: false }} />
        </Stack>
    </Providers>
  );
}

效果说明 #

启动后SplashScreen会持续显示，直到字体加载完成、引导屏状态检查完毕，之后直接跳转到目标路由（首次安装进引导屏，已看过则进首页），不会出现首页闪屏的异常。

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