React Native Expo：加载字体时仅显示启动屏的实现方案

核心问题分析 #

当前代码中返回null会导致Expo渲染默认的带标题空白视图，同时全局调用SplashScreen.preventAutoHideAsync()存在异步执行顺序问题，可能导致SplashScreen提前隐藏。以下是针对性的修复方案：

修复步骤与代码实现 #

1. 调整SplashScreen阻止逻辑 #

将preventAutoHideAsync()放入组件挂载后的异步函数中，确保执行顺序正确：

import { SplashScreen, Stack } from "expo-router";
import { useFonts } from "expo-font";
import { useEffect } from "react";
import { View, Text } from "react-native";

export default function App() {
  const [fontsLoaded, fontError] = useFonts({
    "Poppins-Black": require("../assets/fonts/Poppins-Black.ttf"),
    "Poppins-Bold": require("../assets/fonts/Poppins-Bold.ttf"),
    // ...其他字体文件
  });

  // 组件挂载时阻止SplashScreen自动隐藏
  useEffect(() => {
    const prepare = async () => {
      try {
        await SplashScreen.preventAutoHideAsync();
      } catch (err) {
        console.warn("阻止SplashScreen自动隐藏失败:", err);
      }
    };
    prepare();
  }, []);

  // 监听字体加载状态，完成后隐藏SplashScreen
  useEffect(() => {
    const handleLoadFinish = async () => {
      if (fontError) {
        console.error("字体加载失败:", fontError);
        await SplashScreen.hideAsync();
        return;
      }
      if (fontsLoaded) {
        // 若有其他异步任务（如接口请求），可在此添加等待逻辑
        // await fetchInitialData();
        await SplashScreen.hideAsync();
      }
    };
    handleLoadFinish();
  }, [fontsLoaded, fontError]);

  // 加载期间返回空View而非null，避免触发默认空白视图
  if (!fontsLoaded && !fontError) {
    return <View style={{ flex: 1 }} />;
  }

  // 字体加载失败时显示错误页面（可选）
  if (fontError) {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>字体加载失败，请重启应用</Text>
      </View>
    );
  }

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

2. 验证SplashScreen配置 #

确保app.json/app.config.js中的SplashScreen配置正确，避免显示异常：

{
  "expo": {
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    }
  }
}

关键优化点 #

• 替换return null为<View style={{ flex: 1 }} />，避免Expo渲染默认带标题的空白界面
• 将preventAutoHideAsync()放入组件挂载后的异步函数，确保阻止逻辑执行完成
• 统一处理字体加载错误，避免直接抛出异常导致崩溃
• 预留其他异步任务的等待位置，可统一控制SplashScreen隐藏时机

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