react-native-vector-icons进阶教程（自定义iconfont使用）

前言

React Native大火大热，其中为了解决图标，易于修改，换颜色，高清等需求，你仍是选择切多套png来适配吗？答案固然是否认的！不知从什么时候起，扁平化图标成为潮流，iconfont也应运而生，最早接触iconfont已经是多年前的事了，那时候只知道怎么在web上使用，它带来的便捷性和可扩展性也是你们有目共睹。 最早接触iconfont这一律念仍是从一些国外的图标网站得来，譬如flaticon、icomoon，但这些毕竟都是国外的平台，身在大天朝说实话用的有些不习惯，这时候iconfont.cn应运而生，彻底针对中国的iconfont平台，在使用上最起码很顺手。好了，说了这么多只想重申一点，iconfont你值得拥有，不管事web，仍是app，亦或是咱们今天的主角（react-native）。

1、react-native-vector-icons 概述

这个是在GitHub上最火的react-native图标库，使用起来简单高效，其中内置市面上大部分开源的图标库，咱们只须要简单的配置，便可立刻体验iconfont带来的快感，虽然其官方仓库已经有很清楚的步骤带领咱们一步步配置，这里我仍是以我本身通俗的理解作下步骤讲解：

2、react-native-vector-icons安装和配置

npm install --save react-native-vector-icons
//或者
npm install -g yarn
yarn add react-native-vector-icons
复制代码

一、android平台

1.一、自动配置

react-native link react-native-vector-icons
// 或者
npm install -g rnpm
rnpm link react-native-vector-icons
复制代码

会为你配置好全部，可是这是成功的状况下，你不须要操心任何事，可是每每不能如愿。若是你这步成功了，并且可以正常运行，下面这些你就能够跳过！

1.二、手动配置

1.2.1 复制字体文件（这一步千万不能忘记，否则就算运行成功你也看不到图标）

找到项目node_modules/react-native-vector-icons/Fonts，里面有不少已经内置的图标库字体文件，依照本身的需求，复制你须要的字体文件到 android/app/src/main/assets/fonts，（若是没有这个目录就自行建立）

1.2.2 配置 android/settings.gradle

在现有的代码基础上添加以下代码：

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
复制代码

1.2.3 配置android/app/build.gradle

修改以下：

dependencies {
    compile project(':react-native-vector-icons') //添加 compile fileTree(dir: "libs", include: ["*.jar"]) compile "com.android.support:appcompat-v7:23.0.1" compile "com.facebook.react:react-native:+" // From node_modules compile project(':react-native-navigation') } 复制代码

1.2.4 配置 android/app/src/main/java/com/xxxx/MainApplication.java

import com.oblador.vectoricons.VectorIconsPackage;
@Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
      new MainReactPackage()
+   , new VectorIconsPackage()
    );
  }
复制代码

到这里配置就所有完成，接下来就能够在rn项目中使用iconfont

import Icon from 'react-native-vector-icons/dist/Ionicons';
<Icon name='ios-settings' size={16} color="#fff"/> 复制代码

二、ios平台

相对android来讲简单不少，能够参照github上面的步骤来！

3、使用自定义iconfont

说了这么多，还只是它自带的图标库的使用，若是咱们要使用本身自定义的一些图标呢，譬如iconfont.cn上面的

一、图标准备

如上图，做为测试，我准备了上述图标。点击下载至本地，里面包含全部的字体文件。找到iconfont.ttf，这是咱们重点须要的文件。

二、react-native-vector-icons结构分析

以下图，找到node_modules/react-native-vector-icons的根目录，能够看到不少js文件，命名都是以图标库的名称命名，随便打开一个Ionicons.js，发现代码很简单

把这个文件复制一遍，重命名为Iconfont.js，修改成以下：

import createIconSet from './lib/create-icon-set';
import glyphMap from './glyphmaps/Iconfont.json';

const iconSet = createIconSet(glyphMap, 'fontcustom', 'Iconfont.ttf');

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文件，顺着路径能够找到不少json文件。

这就是接下来要整理出来的字符对应表。固然你能够手动去整理，一个两个的还能够，若是一个项目几十上百个甚至更多呢，能用工具去解决的事，咱们毫不浪费时间，接下来介绍的就是如何利用工具去获取字符表。

2.1 安装python

点击下载pthon安装包www.python.org/ftp/python/… 等待安装完成！

2.2 配置python环境变量

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

2.3 安装 fonttools

pip install fonttools
复制代码

具体介绍请参考：github地址

2.4准备react-native-iconfont-mapper

直接打包下载react-native-iconfont-mapper，或者经过git克隆到本地，这个目录本身选个容易记住的，由于之后用的比较多。

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

2.5 提取字符表

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

python iconfont-mapper.py iconfont.ttf iconfont.js
复制代码

不出意外，能够生成一个iconfont.js文件，打开查看即可以看到咱们所须要的json字符串

2.5 新建icon font.json

在node_modules/react-native-vector-icons/glyphmaps中新建Iconfont.json

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

这里须要注意，刚才生成的字符表json对象后面的值有引号，这里须要删除，因为个数比较少，我仍是选择手动删除，若是多的话仍是推荐正则来批量删除，可是还不会，但愿有知道怎么操做的在下面留言。 到这里，扩展react-native-vector-icons，添加自定义图标就完成了，接下来就能够像上面同样引用iconfont图标了

import Icon from 'react-native-vector-icons/Iconfont'; // 不过引用的时候就要改为Iconfont了，其余的相似
复制代码

自定义iconfont的另一种用法

上面那种方法是在react-native-vector-icons的基础上扩展其图标库，可是有时候咱们每每不须要去安装这么大的一个库，甚至去引用那么多字体文件，不知道你们是否还记得咱们是怎么在web端使用iconfont的

<span class="iconfont icon-home"></span 复制代码

那能不能在react-native中也这样使用呢？这样更贴合前端人员的思想 追溯到咱们提取成功字符表的那一步！

var map = {"home":"58880","setting":"58881","code":"58886","money":"58951","phone":"58952","user":"58890","customer":"58993","x":"120","message":"59034","add":"59418","password":"58910",};
;module.exports = (name)=>String.fromCharCode(map[name]);
;module.exports.map = map;
复制代码

直接将这个文件拷贝到项目中，能够用以下的方式来直接使用

import icon from "./fontConf";
export default class IconExample extends Component {
    render() {
        return (
            <View style={styles.container}> <Text style={{fontFamily: 'Iconfont',fontSize:30}}> arrow-icon:{icon('arrow')} </Text> <Text style={{fontFamily: 'Iconfont',fontSize:30, color:"#ff4444"}}> vip-icon:{icon('tag-svip')} </Text> <Text style={{fontFamily: 'Iconfont',fontSize:30, color:"#ff4444"}}> tag-svip:{icon('tag-svip')} </Text> </View>
        )
    }
}
复制代码

重点提示：以上全部操做，都须要将字体文件拷贝到android/app/src/main/assets/fonts