You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React Native自定义字体配置后无法生效,请求排查解决问题

React Native 字体不生效的排查与解决

1. 配置文件路径错误

你的react-native.config.js里的assets路径存在语法错误,开头缺少了根目录标识的斜杠:
原错误配置:

assets:['.android/app/src/main/res/assets/fonts/'],

修正后的正确配置:

module.exports = {
    project: {
        ios:{},
        android:{}
    },
    assets:['./android/app/src/main/res/assets/fonts/'],
};

2. 执行字体链接命令

修改配置后,必须执行字体链接命令让系统识别字体资源:

npx react-native link

React Native 0.60+版本虽支持自动链接,但手动执行一次可确保链接生效。

3. 字体名称匹配问题

文件名不等于字体的内部实际名称,Android和iOS对字体名的识别依赖于字体文件本身的元数据,而非文件名:

  • Windows:右键字体文件→属性→详细信息→「标题」字段为字体实际名称
  • Mac:双击字体文件打开字体册,顶部显示的名称为实际字体名
    确保代码中fontFamily使用的是这个实际名称,而非文件名。例如字体内部名称为MyCustomFont-Bold,则代码需写:
title: {
    fontFamily: 'MyCustomFont-Bold',
},

4. 清除缓存并重启项目

字体不生效常与缓存有关,执行以下步骤:

  • 清除React Native缓存:
npx react-native start --reset-cache
  • 清理Android项目构建缓存:
cd android && ./gradlew clean
  • 重启模拟器/真机,重新运行项目:npx react-native run-android

5. 检查文件路径与命名

确认字体文件确实放在one\android\app\src\main\res\assets\fonts路径下,注意配置文件中需使用正斜杠/作为路径分隔符;同时检查文件名大小写(Android对文件名大小写敏感),确保是Bold.ttf而非bold.ttf这类拼写错误。

内容的提问来源于stack exchange,提问作者Gattu

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.19 00:22:15