前言
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，（如果没有这个目录就自行创建）
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"/>
2、ios平台
相对android来说简单很多，可以参照github上面的步骤来！
三、使用自定义iconfont
说了这么多，还只是它自带的图标库的使用，如果我们要使用自己自定义的一些图标呢，譬如iconfont.cn上面的
1、图标准备
如上图，作为测试，我准备了上述图标。点击下载至本地，里面包含所有的字体文件。找到iconfont.ttf，这是我们重点需要的文件。
2、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安装包https://www.python.org/ftp/python/2.7.14/python-2.7.14.msi
等待安装完成！
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
