在 React Native 使用阿里 iconfont 图标

young.li 发布于2019-08-23 12:42 / 1210人阅读

摘要：熟悉前端开发的大家都一定知道，在网站下载图标集，会自带教程告诉你如何在网页使用。但是在中，跟网页使用的步骤就不同了。

熟悉前端开发的大家都一定知道 iconfont.cn，在网站下载图标集，会自带教程告诉你如何在网页使用 iconfont。但是在 React Native 中，跟网页使用的步骤就不同了。我最开始百度出来的文章，不少都推荐借用 react-native-vector-icons，但是我觉得这一步还是增加了不少无用代码。
其实使用 iconfont，本质上就是使用一种“图标形状的字体”，所以解决问题只需要三步：

安装字体

找到图标对应的 unicode，直接放到标签中

在该标签应用你的“图标字体”

安装字体

这是一个把配置都交给 react-native 的一个简单方法：
首先在 package.json 添加代码

"rnpm": {
    "assets": [
    "./assets/fonts/"
    ]
},

然后运行
react-native link
你就可以在 plist 文件（iOS）或 android/app/src/main/assets/fonts（安卓）中看到对应配置
安装后需要重启 react-native

添加图标

打开在 iconfont 下载的图标集会有这个文件

里面可以看到对应图标的 unicode

把你使用的图标放到标签中 {"ue936"}

应用字体

{"ue936"}

有一点需要注意，写在 fontFamily 的字体名称要使用全名（而不是文件名）

不过 iconfont 三个名字都一样就是了

参考文章：
https://medium.com/react-nati...
http://www.ruanyifeng.com/blo...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98953.html

在react-native中添加高可维护的iconfont字体

摘要：没关系，笔者已经为你们准备好了，请保存到文件中，假设你的文件名叫和你刚才保存的字体文件在一起，方便管理复制字体这个插件包有好多套字体，我们可以需要把自己的也复制到包中对应文件夹，当然了，不可能手动复制，笔者从来都是解放双手的。字体图标盛行的年代，在项目里使用一套不失真又可以随意改变大小颜色的图标，是多么舒服的一件事。这里要推荐iconfont.cn，超多免费图标，当然了，你的专属美工...

CarterLi 2019-08-26 12:00 评论0 收藏0
React Native图片资源使用的优美方案

摘要：图片资源作为与用户交互的界面元素，在客户端产品中起到了非常重要的角色作用。在应用开发中，移动端与的图片使用策略也有所不同。端较大的内存容量，快速的渲染能力使各类型图片资源都能得到较好的使用。图片资源（ jpeg、png、svg、webp ... ）作为与用户交互的界面元素，在客户端产品中起到了非常重要的角色作用。在应用开发中，移动端与PC的图片使用策略也有所不同。PC端较大的内存容量，快速的...

fireflow 2019-05-23 14:32 评论0 收藏0
iconfont在react中完整使用教程

摘要：查阅部分文件，找到相关资料，发现是在纯页面中导入是完全的。但是请注意，咱们将静态资源放置在目录下，中的不可采用。于是，正确做法如下在文件下的或者等文件中写入如下语句即可。第四步介绍使用方法待我研究去吧。。。 hello,各位小伙伴们，很久没写文章了。突然要自己搭建项目了，项目中对于阿里巴巴iconfont的使用，大家都清楚吗？第一步：将图标加入购物车 showImg(https://...

mylxsw 2019-08-30 11:07 评论0 收藏0
iconfont在react中完整使用教程

摘要：查阅部分文件，找到相关资料，发现是在纯页面中导入是完全的。但是请注意，咱们将静态资源放置在目录下，中的不可采用。于是，正确做法如下在文件下的或者等文件中写入如下语句即可。第四步介绍使用方法待我研究去吧。。。 hello,各位小伙伴们，很久没写文章了。突然要自己搭建项目了，项目中对于阿里巴巴iconfont的使用，大家都清楚吗？第一步：将图标加入购物车 showImg(https://...

Prasanta 2019-08-23 18:03 评论0 收藏0