Expo React Native项目使用自定义谷歌字体及AppLoading时遇报错（AppLoading已废弃）

expo-app-loading已被官方废弃，需使用expo-splash-screen的API替代，核心逻辑是通过SplashScreen.preventAutoHideAsync()阻止启动屏自动隐藏，待资源（如字体）加载完成后调用SplashScreen.hideAsync()手动隐藏。

步骤1：安装依赖 #

先安装expo-splash-screen包：

npx expo install expo-splash-screen

步骤2：修改App.js代码 #

替换原有的AppLoading逻辑，改用expo-splash-screen控制启动屏：

import { StatusBar } from 'expo-status-bar';
import { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { useFonts } from 'expo-font';
import SplashScreen from 'expo-splash-screen'; // 导入SplashScreen
import Menu from './Src/Menu';
import { Roboto_400Regular, Roboto_500Medium } from '@expo-google-fonts/roboto'

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

export default function App() {
  const [fontsLoaded, error] = useFonts({
    Roboto_400Regular,
    Roboto_500Medium,
  });

  useEffect(() => {
    async function prepare() {
      try {
        // 等待字体加载完成
        await new Promise(resolve => {
          const interval = setInterval(() => {
            if (fontsLoaded || error) {
              clearInterval(interval);
              resolve();
            }
          }, 100);
        });
      } catch (e) {
        console.warn(e);
      } finally {
        // 字体加载完成后隐藏启动屏
        await SplashScreen.hideAsync();
      }
    }

    prepare();
  }, [fontsLoaded, error]);

  // 字体未加载完成时不渲染主内容（启动屏保持显示）
  if (!fontsLoaded && !error) {
    return null;
  }

  return (
    <NavigationContainer>
      <Menu />
    </NavigationContainer>
  );
} 

代码说明 #

• 移除expo-app-loading的导入，替换为expo-splash-screen
• 全局调用SplashScreen.preventAutoHideAsync()，确保启动屏不会自动消失
• 通过useEffect监听字体加载状态，加载完成后调用SplashScreen.hideAsync()隐藏启动屏
• 字体未加载完成时返回null，此时启动屏会持续显示，直到资源加载完毕

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