react native 使用阿里字体图标库

前言

本文基于

• “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
1

根目录新建 react-native.config.js

• assets 对应的是存放字体图标文件的路径

module.exports = {
  assets: ['./src/assets/fonts/']
};
1
2
3

执行链接

yarn react-native-asset
1

3.使用字体图标

• fontFamily: ‘iconfont’(必须)
• {‘\ue835’} 其中e835为 iconfont 的 Unicode 的后四位

4.效果图

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。