app自定义图标 vue_在react-native项目中使用iconfont自定义图标库(android)

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

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';

...

参考：

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

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

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

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

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

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

React Native项目集成iOS原生模块

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

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