React Native配置自定义字体时出现渲染错误求助

架构老林

2026-8-2

解决React Native（Expo）自定义字体配置的渲染错误

这个错误的核心原因是AppLoading组件未正确导入或不存在。从Expo SDK 44开始，expo-app-loading已被官方弃用，默认Expo项目不再包含这个包，直接导入会得到undefined，导致渲染失败。

解决方案1：使用官方推荐的`expo-splash-screen`（优先选择）

安装依赖：

npx expo install expo-splash-screen

修改代码，用expo-splash-screen的API替代AppLoading：

import { StatusBar } from 'expo-status-bar';
import Home from './screens/home';
import * as Font from 'expo-font';
import React, { useState, useEffect } from 'react';
import * as SplashScreen from 'expo-splash-screen';

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

const getFonts = () => Font.loadAsync({
  'montserrat-regular': require('./assets/fonts/Montserrat-Regular.ttf'),
  'montserrat-medium': require('./assets/fonts/Montserrat-Medium.ttf'),
  'wreath': require('./assets/fonts/insigne - Wreath Halftone Medium.otf'),
});

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  useEffect(() => {
    async function prepare() {
      try {
        await getFonts();
      } catch (e) {
        console.warn(e);
      } finally {
        setFontsLoaded(true);
        // 字体加载完成后隐藏启动屏
        await SplashScreen.hideAsync();
      }
    }

    prepare();
  }, []);

  if (!fontsLoaded) {
    return null;
  }

  return <Home />;
}