Expo 51中SplashScreen白屏：preventAutoHideAsync失效问题

问题背景 #

在Expo 51项目开发时，设置资源加载超时等待（如示例代码中的4秒）会出现白屏现象：SplashScreen在调用hideAsync()前就已自动隐藏。该问题在Expo 50版本中未出现，单独降级expo-splash-screen无效，且因部分依赖包已废弃无法整体降级Expo。

解决方案 #

• 锁定时机调整：将SplashScreen.preventAutoHideAsync()移至组件内部的初始化useEffect中，确保在资源加载启动前就完成锁定，避免根组件外调用因时序问题失效。
• 移除冗余调用：删除!appIsReady分支中的重复preventAutoHideAsync()调用，避免组件重渲染导致的时序冲突。
• 直接触发隐藏：资源加载完成后直接调用hideAsync()，不再依赖onLayout回调，消除视图渲染延迟带来的隐藏时机偏差。

修改后的完整代码 #

import React, { useEffect, useState } from "react";
import FontAwesome from "@expo/vector-icons/FontAwesome";
import { RootSiblingParent } from "react-native-root-siblings";
import {
  DarkTheme,
  DefaultTheme,
  ThemeProvider,
} from "@react-navigation/native";
import * as Font from "expo-font";
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import { View } from "react-native";

import { useColorScheme } from "@/components/useColorScheme";
import { Provider } from "react-redux";
import { persistor, store } from "@/store/store";
import { PersistGate } from "redux-persist/integration/react";

export {
  // Catch any errors thrown by the Layout component.
  ErrorBoundary,
} from "expo-router";

export const unstable_settings = {
  // Ensure that reloading on `/modal` keeps a back button present.
  initialRouteName: "(screens)",
};

export default function RootLayout() {
  const [appIsReady, setAppIsReady] = useState(false);

  useEffect(() => {
    async function prepare() {
      try {
        // 初始化阶段立即锁定SplashScreen
        await SplashScreen.preventAutoHideAsync();
        console.log("SplashScreen.preventAutoHideAsync() succeeded");
        
        console.log("Starting resource loading...");
        await new Promise((resolve) => setTimeout(resolve, 4000));
        await Font.loadAsync({
          SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
          ...FontAwesome.font,
        });
        console.log("Fonts loaded");
      } catch (e) {
        console.warn(e);
      } finally {
        console.log("Resource loading complete");
        setAppIsReady(true);
        // 资源加载完成后直接隐藏启动屏
        await SplashScreen.hideAsync();
        console.log("Splash screen hidden");
      }
    }

    prepare();
  }, []);

  if (!appIsReady) {
    console.log("App is not ready, returning null");
    return null;
  }

  console.log("Rendering RootLayoutNav");
  return (
    <View style={{ flex: 1 }}>
      <RootLayoutNav />
    </View>
  );
}

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

  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <RootSiblingParent>
          <ThemeProvider
            value={colorScheme === "dark" ? DarkTheme : DefaultTheme}
          >
            <Stack>
              <Stack.Screen name="(screens)" options={{ headerShown: false }} />
              <Stack.Screen name="modal" options={{ presentation: "modal" }} />
            </Stack>
          </ThemeProvider>
        </RootSiblingParent>
      </PersistGate>
    </Provider>
  );
}

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