React Native Expo：自定义字体与Google Fonts加载失败问题排查

1. 确认文件路径与存在性 #

错误提示显示找不到SFUIText-Bold.ttf，先做以下检查：

• 从src/utils/useFonts.js出发，../../assets/fonts/sf-ui-text/SFUIText-Bold.ttf对应的实际路径是项目根目录下的assets/fonts/sf-ui-text/SFUIText-Bold.ttf，确认该文件真实存在。
• 检查文件名大小写是否完全匹配，部分系统（如Linux/Android）会因大小写问题导致找不到文件。

2. 修正字体加载逻辑的错误 #

当前代码存在逻辑冲突：useFonts函数内部已经调用Font.loadAsync加载本地字体，但App.js又试图将useFonts的返回值合并到另一个Font.loadAsync中，而useFonts并没有返回任何字体配置对象，这完全是冗余且错误的。

方案一：合并字体加载逻辑（推荐） #

直接在App.js的prepare函数中一次性加载所有字体，去掉冗余的useFonts.js：

// App.js中的prepare函数修改为：
const prepare = async () => {
  try {
    await SplashScreen.preventAutoHideAsync();
    // 同时加载Google字体和本地字体
    await Font.loadAsync({
      'Fira Sans 300': FiraSans_300Light,
      'Fira Sans 400': FiraSans_400Regular,
      'Fira Sans 500': FiraSans_500Medium,
      SF: require('./assets/fonts/sf-ui-text/SFUIText-Bold.ttf'), // 使用App.js相对根目录的路径
    });
  } catch (e) {
    console.warn(e);
  } finally {
    setAppIsReady(true);
    console.log('Loaded fonts...');
  }
};

同时删除useFonts.js，并移除App.js中对应的导入语句。

方案二：修正useFonts.js的写法 #

如果要保留useFonts.js，让它返回字体配置对象，而非直接加载：

// src/utils/useFonts.js修改为：
export const getCustomFonts = () => {
  return {
    SF: require('../../assets/fonts/sf-ui-text/SFUIText-Bold.ttf'),
  };
};

然后在App.js中使用：

// 导入修改后的函数
import { getCustomFonts } from './src/utils/useFonts';

// prepare函数修改为：
const prepare = async () => {
  try {
    const customFonts = getCustomFonts();
    await SplashScreen.preventAutoHideAsync();
    await Font.loadAsync({
      'Fira Sans 300': FiraSans_300Light,
      'Fira Sans 400': FiraSans_400Regular,
      'Fira Sans 500': FiraSans_500Medium,
      ...customFonts,
    });
  } catch (e) {
    console.warn(e);
  } finally {
    setAppIsReady(true);
    console.log('Loaded fonts...');
  }
};

3. 配置Expo资产目录 #

确保app.json（或app.config.js）中包含字体目录的资产配置，让Expo正确打包字体文件：

{
  "expo": {
    "assets": [
      "./assets/fonts/"
    ],
    // 其他配置...
  }
}

4. 清除缓存重启项目 #

运行以下命令清除Expo缓存并重启项目，解决缓存导致的路径解析问题：

expo start -c

内容的提问来源于stack exchange，提问作者Hafiz Muhammad Bilal