
react native 使用阿里字体图标库
注:手动链接(react-native link)已从 react-native 0.69 中删除,以支持自动链接功能,需使用另外一个插件react-native-asset。当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。将iconfont图标文件放置在src/assets/fonts。根目录
·
前言
本文基于
- “react-native”: “^0.70.0”
1.下载iconfont图标文件
将iconfont图标文件放置在src/assets/fonts
- react native 所需的字体图标文件仅需iconfont.ttf这一个文件即可
- 其余文件只是用于打开demo_index.html,打包时可将其余文件删除
2.链接字体图标文件到android/ios文件夹下
注:手动链接(react-native link)已从 react-native 0.69 中删除,以支持自动链接功能,需使用另外一个插件react-native-asset
yarn add react-native-asset --save
根目录新建 react-native.config.js
- assets 对应的是存放字体图标文件的路径
module.exports = {
assets: ['./src/assets/fonts/']
};
执行链接
yarn react-native-asset
3.使用字体图标
- fontFamily: ‘iconfont’(必须)
- {‘\ue835’} 其中e835为 iconfont 的 Unicode 的后四位
4.效果图
如果本篇文章对你有帮助的话,很高兴能够帮助上你。
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。
更多推荐
所有评论(0)