react-native-vector-icons进阶教程（自定

前言

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

一、react-native-vector-icons 概述

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

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

npm install --save react-native-vector-icons
//或者
npm install -g yarn
yarn add react-native-vector-icons

1、android平台

1.1、自动配置

react-native link react-native-vector-icons
// 或者
npm install -g rnpm
rnpm link react-native-vector-icons

会为你配置好所有，但是这是成功的情况下，你不需要操心任何事，但是往往不能如愿。如果你这步成功了，而且能够正常运行，下面这些你就可以跳过！

1.2、手动配置

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

找到项目node_modules/react-native-vector-icons/Fonts，里面有很多已经内置的图标库字体文件，依照自己的需求，复制你需要的字体文件到 android/app/src/main/assets/fonts，（如果没有这个目录就自行创建）

image.png

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"/>

image.png

2、ios平台

相对android来说简单很多，可以参照github上面的步骤来！

三、使用自定义iconfont

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

image.png

1、图标准备

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

image.png

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

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

image.png

把这个文件复制一遍，重命名为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文件。

image.png

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

2.1 安装python

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

2.2 配置python环境变量

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

image.png

2.3 安装 fonttools

pip install fonttools

具体介绍请参考：github地址

2.4准备react-native-iconfont-mapper

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

image.png

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

2.5 提取字符表

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

image.png

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

image.png

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

image.png

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