前言

本文基于

  • “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.效果图

在这里插入图片描述

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

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

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐