项目中因为不想使用小图标，打算使用iconfont,所以本文只要记录在React Nativ如何配置
React Native版本：0.57
一、下载
先去下载IconFont图标，将其中的iconfont.css和iconfont.ttf复制到你的项目中，我放入的目录是appName/src/components/Icon
二、安装三方库
因为使用的typescript所以安装此版本
yarn add @types/react-native-vector-icons,
因为创建字体映射文件需要
generate-icon-set-from-css,所以我也安装了普通版本yarn add react-native-vector-icons
三、创建字体映射文件 create-iconfont-json.js
写入：
const fs = require('fs');
const generateIconSetFromCss = require('react-native-vector-icons/lib/generate-icon-set-from-css');
// 和你刚才保存的iconfont字体文件在一起，方便管理
const cssDir = __dirname;
const iconSet = generateIconSetFromCss(cssDir + '/iconfont.css', 'icon-');
fs.writeFileSync(cssDir + '/iconfont.json', iconSet);
此文件主要用于创建字体映射文件，代码中的路径
__dirname就是当前这个文件create-iconfont-json.js的路径，所以创建的iconfont.css也会生成在当前目录，创建完成后，文件格式大致为如下
{
"glass": 61440,
"music": 61441,
"search": 61442,
"envelope-o": 61443,
"heart": 61444,
"star": 61445,
"star-o": 61446,
"user": 61447,
//等等...
}
四、创建脚本文件 copy-font.sh，
此文件作用是，运行create-iconfont-json.js文件，生成iconfont.json,同时把第一步保存的iconfont.ttf复制到node_modules/react-native-vector-icons/Fonts/目录
# 先生成json文件
node create-iconfont-json.js
# 当前文件路径
pwd
# 包自带的字体10几套，占空间，如果你需要那些字体库，把下面这行注释
rm -rf ../../../../node_modules/react-native-vector-icons/Fonts/*
# 复制iconfont字体文件至react-native-vector-icons/Fonts目录
cp -f ./iconfont.ttf ../../../../node_modules/react-native-vector-icons/Fonts/
# 链接到android和ios
cd ../../../../
react-native link react-native-vector-icons
文件中的
../../../../node_modules/react-native-vector-icons/Fonts/路径，需要根据项目中此文件的位置来确定,运行copy-font.sh文件，pwd会输出当前路径，再确定路径
运行：
sh copy-font.sh
windows下运行
sh命令，如果有git，可以使用git bash，我使用的是cmder 并注册到右键菜单
五、创建Iconfont组件
import React, { Component } from 'react'
import { createIconSet } from 'react-native-vector-icons'
const json = require('./iconfont.json')
const Icon: any = createIconSet(json, 'iconfont', 'iconfont.ttf')
export default class IconFont extends Component <any, any>{
constructor (props: any) {
super(props)
}
public state = {
}
render() {
return (
<Icon {...this.props}/>
);
}
}
为了方便管理，此文件在
AppName/src/components/Icon中
六、调用
import IconFont from './components/Icon/IconFont'
<IconFont name="wangyiyunyinle" size = {20} color="#fff" />
