1. 安装react-native-vector-icons

yarn add react-native-vector-icons
react-native link

如果没有关联成功的话,可以参考官方文档手动配置一下

2. 将从阿里下载的iconfont.tff文件复制到以下目录

3. 在android/app/build.gradle中添加:

project.ext.vectoricons = [
iconFontNames: ['iconfont.ttf' ] //添加你需要赋值的字符文件
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

4. 在项目中创建字体配置文件

// DIYIcon.js

import createIconSet from 'react-native-vector-icons/lib/create-icon-set';
import glyphMap from './iconfont.json'; const iconSet = createIconSet(glyphMap, 'DIYIcon', 'iconfont.ttf'); // 'DIYIcon'可自定义名称 export default iconSet; export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;

  

// iconfont.json

{
"glass": 61440,
"music": 61441,
"search": 61442,
"envelope-o": 61443,
"heart": 61444,
"star": 61445,
"star-o": 61446,
"user": 61447,
//等等...
}

附iconfont.json自动提取的方法:

4.1 安装python

点击下载pthon安装包https://www.python.org/ftp/python/2.7.14/python-2.7.14.msi
等待安装完成!

4.2 配置python环境变量

在path中添加 python安装目录以及Scripts

 

4.3 安装 fonttools

pip install fonttools

具体介绍请参考:github地址

4.4 准备react-native-iconfont-mapper

直接打包下载react-native-iconfont-mapper,或者通过git克隆到本地,这个目录自己选个容易记住的,因为以后用的比较多。

 
项目比较单一,仅仅一个python文件。

4.5 提取字符表

将前面下载的字体包中的ttf文件拷贝到这里

 
python iconfont-mapper.py iconfont.ttf iconfont.js
 
 

不出意外,可以生成一个iconfont.js文件,打开查看便可以看到我们所需要的json字符串

 
 

4.6 新建iconfont.json

{
"home": 58880,
"setting": 58881,
"code": 58886,
"money": 58951,
"phone": 58952,
"user": 58890,
"customer": 58993,
"message": 59034,
"add": 59418,
"password": 58910
}

这里需要注意,刚才生成的字符表json对象后面的值有引号,这里需要删除

5. 使用

import DIYIcon from './diyicon/DIYIcon';

...

<DIYIcon name={'glass'} size={'50'} color={'#ed4040'} />

参考:

http://www.imbeta.cn/zai-react-nativezhong-you-ya-de-shi-yong-iconfont.html

https://segmentfault.com/a/1190000009939727

https://www.jianshu.com/p/332198bf46a7

在react-native项目中使用iconfont自定义图标库(android)的更多相关文章

  1. vue 项目中使用阿里巴巴矢量图标库iconfont

    原文:https://www.jianshu.com/p/38262f18eee2 1.打开iconfont阿里巴巴官网https://www.iconfont.cn 2.新建项目(这样方便后期维护图 ...

  2. 在微信小程序中引入 Iconfont 阿里巴巴图标库

    小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法 一.下载图标 首 ...

  3. 组装者模式在React Native项目中的一个实战案例

    前言 在实际的开发中,如果遇到多个组件有一些共性,我们可以提取一个BaseItem出来,然后在多个组件中进行复用,一种方式是通过继承的方式,而今天我们要说的是另一种方式--组装者模式. 什么是组装者模 ...

  4. React Native项目集成iOS原生模块

    今天学习一下怎么在React Native项目中集成iOS原生模块,道理和在iOS原生项目中集成React Native模块类似.他们的界面跳转靠的都是iOS原生的UINavigationContro ...

  5. 技术实践丨React Native 项目 Web 端同构

    摘要:尽管 React Native 已经进入开源的第 6 个年头,距离发布 1.0 版本依旧是遥遥无期."Learn once, write anywhere",完全不影响 Re ...

  6. 【腾讯Bugly干货分享】React Native项目实战总结

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...

  7. React Native 项目实战-Tamic

    layout: post title: React Native 项目实战 date: 2016-10-18 15:02:29 +0800 comments: true categories: Rea ...

  8. Expo大作战(三)--针对已经开发过react native项目开发人员有针对性的介绍了expo,expo的局限性,开发时项目选型注意点等

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  9. React Native工程中TSLint静态检查工具的探索之路

    建立的代码规范没人遵守,项目中遍地风格迥异的代码,你会不会抓狂? 通过测试用例的程序还会出现Bug,而原因仅仅是自己犯下的低级错误,你会不会抓狂? 某种代码写法存在问题导致崩溃时,只能全工程检查代码, ...

随机推荐

  1. bzoj 2816: [ZJOI2012]网络 (LCT 建多棵树)

    链接:https://www.lydsy.com/JudgeOnline/problem.php?id=2816 题面: http://www.lydsy.com/JudgeOnline/upload ...

  2. 4.1 socket

    socket  背景概念 脑图结构 OSI 模型 socket 概念特性 脑图结构 理解示意图  额外补充 Socket是应用层与 TCP/IP协议族通信的中间软件抽象层,它是一组接口. 在设计模式中 ...

  3. 在 Angular6 中使用 HTTP 请求服务端数据

    第一步 准备好api接口地址, 例如 https://api.example.com/api/ 第二步 在根组件 app.module.ts 中引入 HttpClientModule 模块. // a ...

  4. The 19th Zhejiang University Programming Contest Sponsored by TuSimple (Mirror) B"Even Number Theory"(找规律???)

    传送门 题意: 给出了三个新定义: E-prime : ∀ num ∈ E,不存在两个偶数a,b,使得 num=a*b;(简言之,num的一对因子不能全为偶数) E-prime factorizati ...

  5. WebSocke实时通讯协议

    WebSocket 是什么? WebSocket 是一种网络通信协议.RFC6455 定义了它的通信标准. WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议 ...

  6. C#中的Finalize,Dispose,SuppressFinalize的实现和使用介绍

    原文地址:http://www.csharpwin.com/csharpspace/8927r1397.shtml MSDN建议按照下面的模式实现IDisposable接口: public class ...

  7. Nuxt.js学习

    SSR服务端渲染 之前用vue做项目时,在浏览器中查看网页源码,是没有具体内容的,只有一个标签,用服务端渲染的话,查看网页源码数据都会显示出来,所以有利于SEO,能够被搜索到. Nuxt.js是做Vu ...

  8. mysql MHA架构搭建过程

    [环境介绍] 系统环境:Red Hat Enterprise Linux 7 + 5.7.18 + MHA version 0.57 系统 IP 主机名 备注 版本 xx系统 192.168.142. ...

  9. [物理学与PDEs]第5章第2节 变形的描述, 应变张量 2.2 Cauchy - Green 应变张量

    1.  引理 (极分解): 设 $|{\bf F}|\neq 0$, 则存在正交阵 ${\bf R}$ 及对称正定阵 ${\bf U},{\bf V}$ 使得 $$\bex {\bf F}={\bf ...

  10. [物理学与PDEs]第3章第2节 磁流体力学方程组 2.3 磁流体力学方程组

    1.  磁流体力学方程组 $$\beex \bea \cfrac{\p {\bf H}}{\p t} &-\rot({\bf u}\times{\bf H})=\cfrac{1}{\sigma ...