React Native无法加载自定义字体：已尝试多方案仍报错求助

问题详情 #

• 已尝试各类在线方案，仍无法成功加载自定义字体，报错提示路径解析失败
• 具体报错：

无法从/Users/malo/we-will-name-this-project-later/components/LandingTopUtil.js解析模块/assets/fonts/unicode.compacta.ttf：
不存在以下文件：unicode.compacta.ttf

• 字体加载代码片段：

const loadFont = async () => {
  await Font.loadAsync({
    'assignedfont': require('/assets/fonts/unicode.compacta.ttf'), // Verify the path
                                ^
    });
    setFontLoaded(true);
};

• 项目配置代码（存在语法问题）：

module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"

# assets: ['./assets/fonts/'], // stays the same

};

• 确认：字体文件确实存放在项目assets/fonts/目录下

针对性解决方案 #

1. 修正字体路径引用 #

代码中使用的/assets/fonts/...是系统根目录绝对路径，而非项目根目录路径。根据文件层级（LandingTopUtil.js在components文件夹），改用相对路径：

const loadFont = async () => {
  await Font.loadAsync({
    'assignedfont': require('../assets/fonts/unicode.compacta.ttf'),
  });
  setFontLoaded(true);
};

2. 修复配置文件语法错误 #

配置文件存在注释语法错误+配置项被注释的问题，修改后：

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./assets/fonts/'], // 启用字体目录配置
};

3. 重新执行字体链接 #

配置更新后，重新执行字体链接命令：

• React Native 原生项目：

  npx react-native link
  

• Expo 项目：

  npx expo install expo-font
  npx expo prebuild
  

4. 验证文件信息一致性 #

检查字体文件名的大小写、扩展名与代码中完全匹配（类Unix系统区分文件名大小写），确保没有拼写错误。

5. 清除缓存重启项目 #

清除Metro缓存后重启，避免旧缓存干扰：

npx react-native start --reset-cache

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