Expo + Expo Router开发React Native应用：启动页提前隐藏与引导页闪屏问题求助

嘿，我来帮你搞定这两个闹心的问题！结合你给出的代码片段和描述，咱们一步步拆解解决：

问题1：启动页（Splash Screen）总是提前隐藏 #

从你的代码里看到你已经调用了SplashScreen.preventAutoHideAsync()，但问题应该出在没有等所有必要的初始化完成就手动隐藏了启动页。咱们得等字体加载完毕、onboarding状态检查完成这两件事都搞定，再触发隐藏操作才对。

给你补全后的RootLayout代码参考：

import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import { useEffect, useState } from "react";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import "react-native-reanimated";
import { useOnboardingStore } from "../store/onboard";

// 先阻止启动页自动隐藏
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  // 加载自定义字体，这里替换成你自己的字体配置
  const [fontsLoaded] = useFonts({
    // 'YourCustomFont': require('../assets/fonts/YourCustomFont-Regular.ttf'),
  });
  
  const { checkOnboardingStatus } = useOnboardingStore();
  // 跟踪onboarding状态是否检查完成
  const [isOnboardingChecked, setIsOnboardingChecked] = useState(false);

  useEffect(() => {
    async function initApp() {
      try {
        // 先等onboarding状态检查完成
        await checkOnboardingStatus();
        setIsOnboardingChecked(true);
      } catch (err) {
        console.error('初始化状态检查失败:', err);
      } finally {
        // 只有当字体加载+状态检查都完成后，才隐藏启动页
        if (fontsLoaded && isOnboardingChecked) {
          await SplashScreen.hideAsync();
        }
      }
    }

    initApp();
  }, [fontsLoaded, checkOnboardingStatus]);

  // 在所有初始化完成前，返回空视图，避免提前渲染路由内容
  if (!fontsLoaded || !isOnboardingChecked) {
    return null;
  }

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <BottomSheetModalProvider>
        <Stack>
          {/* 这里放你的路由栈配置 */}
        </Stack>
      </BottomSheetModalProvider>
    </GestureHandlerRootView>
  );
}

几个关键注意点：

• 别用超时来控制启动页，依赖初始化完成的状态才是靠谱的做法，不然不同设备性能不同，超时设置多了少了都不合适
• 用状态变量跟踪初始化进度，没完成时返回null，避免路由内容提前渲染导致启动页被迫消失

问题2：引导页（Onboarding）闪一下才跳转到授权页 #

这个问题是因为路由渲染先于状态检查完成：RootLayout还在检查用户是否完成引导时，路由已经先渲染了引导页，等状态更新后才触发重定向，就会出现闪屏。

给你两个解决方案，按需选：

方案1：在布局里控制路由渲染（适合基础场景） #

结合刚才的RootLayout，再在你的路由布局（比如app/_layout.tsx）里添加路由保护逻辑，确保状态明确后再渲染对应页面：

import { Stack, useRouter, useSegments } from 'expo-router';
import { useOnboardingStore } from '../store/onboard';
import { useEffect } from 'react';

export default function AppLayout() {
  const router = useRouter();
  const currentSegments = useSegments();
  const { isOnboardingCompleted } = useOnboardingStore();

  useEffect(() => {
    const currentRoute = currentSegments[0];
    // 已经完成引导，但当前在引导页 → 跳去授权页
    if (isOnboardingCompleted && currentRoute === 'onboarding') {
      router.replace('/auth');
    }
    // 没完成引导，但当前不在引导页 → 跳去引导页
    if (!isOnboardingCompleted && currentRoute !== 'onboarding') {
      router.replace('/onboarding');
    }
  }, [currentSegments, isOnboardingCompleted, router]);

  return (
    <Stack>
      <Stack.Screen name="onboarding" options={{ headerShown: false }} />
      <Stack.Screen name="auth" options={{ headerShown: false }} />
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
    </Stack>
  );
}

方案2：用expo-router的Middleware（推荐，v2+可用） #

如果你的expo-router是v2及以上版本，用Middleware能在路由渲染前就完成状态检查，从根源上避免闪屏：

// 在app目录下创建 _middleware.ts 文件
import { NextRequest } from 'expo-router/server';
import { useOnboardingStore } from '../store/onboard';

export async function middleware(request: NextRequest) {
  // 先获取用户的引导完成状态
  const isOnboardingDone = await useOnboardingStore.getState().checkOnboardingStatus();
  const currentPath = request.nextUrl.pathname;

  // 路由拦截逻辑
  if (!isOnboardingDone && currentPath !== '/onboarding') {
    // 没完成引导，强制跳去引导页
    return Response.redirect(new URL('/onboarding', request.url));
  }
  if (isOnboardingDone && currentPath === '/onboarding') {
    // 已经完成引导，强制跳去授权页
    return Response.redirect(new URL('/auth', request.url));
  }
}

// 指定哪些路由需要应用这个拦截逻辑
export const config = {
  matcher: ['/', '/onboarding', '/auth', '/(tabs)/*'],
};

这个方案会在导航到目标页面之前就完成状态检查和重定向，根本不会渲染引导页，自然就不会有闪屏问题。

另外要注意：你的useOnboardingStore里的checkOnboardingStatus方法最好是返回Promise的异步方法，确保能正确获取到持久化的状态（比如从AsyncStorage里读取）。

备注：内容来源于stack exchange，提问作者Mohammed Hamdoon