React Native添加新字体失败,react-native-asset报错求助
解决React Native 0.71.14添加字体失败的问题
一、修复react-native-asset报错的方案
你遇到的报错是因为全局安装的react-native-asset版本与RN 0.71.14不兼容,或是库本身的路径解析逻辑问题,按以下步骤处理:
- 卸载全局的
react-native-asset
npm uninstall -g react-native-asset
- 本地安装该库到项目
在项目根目录执行:
npm install react-native-asset --save-dev
- 重新执行字体链接命令
npx react-native-asset
如果仍报错,再次确认react-native.config.js是否放在项目根目录(与package.json同级),以及assets路径是否为正确的相对路径。
二、替代方案:手动配置字体(更稳定)
RN 0.60+支持自动链接,但字体的自动链接偶尔会出问题,手动配置更可靠:
iOS端配置
- 打开Xcode,将
assets/fonts下的所有字体文件拖拽到项目的Resources文件夹中,勾选Copy items if needed,并确保目标是你的主项目target。 - 打开
Info.plist,添加Fonts provided by application数组项,将每个字体的完整文件名(含后缀,比如PingFangSC-Regular.ttf)添加到数组内。 - 执行
cd ios && pod install && cd ..,随后重启RN项目。
Android端配置
- 在
android/app/src/main目录下创建assets/fonts文件夹(不存在则新建)。 - 将所有字体文件复制到
android/app/src/main/assets/fonts目录中。 - 在代码样式中直接引用字体名称(注意:字体名称不一定等于文件名,比如文件名为
PingFangSC-Regular.ttf,实际字体名称可能是PingFang SC,可通过字体文件属性查看真实名称)。
三、验证字体是否生效
在组件样式中引用测试:
const styles = StyleSheet.create({ testText: { fontFamily: 'PingFang SC', // 替换为你的字体真实名称 fontSize: 18, }, });
内容的提问来源于stack exchange,提问作者Julien Meunier
相关产品推荐
相关产品推荐

