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

React Native添加新字体失败,react-native-asset报错求助

解决React Native 0.71.14添加字体失败的问题

一、修复react-native-asset报错的方案

你遇到的报错是因为全局安装的react-native-asset版本与RN 0.71.14不兼容,或是库本身的路径解析逻辑问题,按以下步骤处理:

  1. 卸载全局的react-native-asset
npm uninstall -g react-native-asset
  1. 本地安装该库到项目
    在项目根目录执行:
npm install react-native-asset --save-dev
  1. 重新执行字体链接命令
npx react-native-asset

如果仍报错,再次确认react-native.config.js是否放在项目根目录(与package.json同级),以及assets路径是否为正确的相对路径。

二、替代方案:手动配置字体(更稳定)

RN 0.60+支持自动链接,但字体的自动链接偶尔会出问题,手动配置更可靠:

iOS端配置

  1. 打开Xcode,将assets/fonts下的所有字体文件拖拽到项目的Resources文件夹中,勾选Copy items if needed,并确保目标是你的主项目target。
  2. 打开Info.plist,添加Fonts provided by application数组项,将每个字体的完整文件名(含后缀,比如PingFangSC-Regular.ttf)添加到数组内。
  3. 执行cd ios && pod install && cd ..,随后重启RN项目。

Android端配置

  1. 在android/app/src/main目录下创建assets/fonts文件夹(不存在则新建)。
  2. 将所有字体文件复制到android/app/src/main/assets/fonts目录中。
  3. 在代码样式中直接引用字体名称(注意:字体名称不一定等于文件名,比如文件名为PingFangSC-Regular.ttf,实际字体名称可能是PingFang SC,可通过字体文件属性查看真实名称)。

三、验证字体是否生效

在组件样式中引用测试:

const styles = StyleSheet.create({
  testText: {
    fontFamily: 'PingFang SC', // 替换为你的字体真实名称
    fontSize: 18,
  },
});

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.07.04 17:46:14