expo-font不生效：Expo React Native应用无法正常显示自定义字体

下面是可直接落地的排查和修复步骤：

1. 校验基础配置正确性 #

• 确认assets/fonts/ProximaNova-Regular.otf文件真实存在，文件名大小写和require路径中的写法完全匹配（React Native资源路径大小写敏感）
• 确认你使用的fontFamily值和字体文件的PostScript名称完全一致，而非自行随意命名：
  • Mac端：打开字体册导入该字体，查看字体信息中的「PostScript名称」字段
  • Windows端：右键字体文件 → 属性 → 详细信息，查找PostScript名称字段
• 执行npx expo start --clear清除开发缓存后重启项目，排除缓存导致的资源加载异常

2. 修复加载逻辑（适配Expo SDK 46及以上版本） #

Expo SDK 46之后expo-app-loading已废弃，很多异常都是使用废弃组件导致的，建议切换为官方推荐的expo-splash-screen方案：

第一步：安装依赖 #

npx expo install expo-font expo-splash-screen

第二步：替换App.js代码 #

import React, { useState, useEffect } from 'react';
import { Text, View } from 'react-native';
import * as Font from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';

// 阻止启动页自动隐藏，直到字体加载完成
SplashScreen.preventAutoHideAsync();

const App = () => {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  useEffect(() => {
    const loadFontResources = async () => {
      try {
        await Font.loadAsync({
          // 此处key必须和字体的PostScript名称完全一致
          'ProximaNova-Regular': require('./assets/fonts/ProximaNova-Regular.otf'),
        });
      } catch (loadError) {
        console.log('字体加载报错：', loadError);
      } finally {
        setFontsLoaded(true);
        SplashScreen.hideAsync();
      }
    }
    loadFontResources();
  }, []);

  // 字体加载完成前不渲染业务内容
  if (!fontsLoaded) {
    return null;
  }

  return (
    <Text style={{fontFamily: 'ProximaNova-Regular', fontSize: 24}}>自定义字体测试文本</Text>
  );
}

export default App;

3. 低版本SDK兼容方案 #

如果你使用的是SDK 45及以下版本，保留expo-app-loading的前提下，可在你的LoadFonts函数中增加异常捕获，确认是否存在路径错误等加载异常：

const LoadFonts = async () => {
  try {
    await useFonts();
  } catch (e) {
    console.log('加载字体出错', e);
  }
};

如果控制台打印路径错误，直接修正资源路径即可。

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