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
相关产品推荐
相关产品推荐

