1.需要引入的库：
yarn add react-native-vector-icons
react-native link react-native-vector-icons
2.调用库里面自带的图标
进入 node_mudules下的react-native-vector-icons库的glyphmaps文件夹，发现有很多的json文件，每个json文件的内容结构如下：
{
"ios-add": 61698,
"ios-add-circle": 61697,
"ios-add-circle-outline": 61696,
"ios-airplane": 61751,
"ios-alarm": 62408,
"ios-albums": 62410,
"ios-alert": 61700,
"ios-american-football": 61702,
"ios-analytics": 62414,
"ios-aperture": 61704,
"ios-apps": 61706,
"ios-appstore": 61708,
"ios-archive": 61710,
}
这里面的key值就是需要调用的图标的name，在App.js文件选取Ionicons.js调用：
//App.js
import React, {Component} from 'react';
import {StyleSheet,View} from 'react-native';
import Icons from 'react-native-vector-icons/Ionicons';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Icons name = 'ios-add' size={15} color='red'></Icons>
<Icons name = 'ios-add-circle-outline' size={20} color='blue'></Icons>
<Icons name = 'ios-add' size={15} color='blue'></Icons>
</View>
);
}
}
效果如下：
效果1
3.调用自定义的svg图片文件（以Iconfont-阿里巴巴图标矢量库为例）
进入Iconfont-阿里巴巴图标矢量库，将所需要的图标加入购物车
步骤1
进入购物车后，点击添加至项目
步骤2
或需要上传自己的图标文件，需要点击右上角上传按钮，将自己的Svg文件拖入网站中，选择保留颜色并提交即可。
上传1
上传2
上传3
将项目中的图标文件下载至本地
步骤3
解压本地的文件夹
步骤4
打开
node_mudules下的react-native-vector-icons库，建立 与Iconicons.js文件同级的icpnfont.js文件：
//iconfont.js
import createIconSet from './lib/create-icon-set';
import glyphMap from './glyphmaps/iconfont.json';
const iconSet = createIconSet(glyphMap, 'iconfont', '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.ttf文件和iconfont.json文件，将下载解压后的文件夹中的iconfont.ttf文件放入
react-native-vector-icons库的Fonts文件夹下，在glyphmaps文件夹下面建立iconfont.json文件
//iconfont.json
{
"message":59200,
"drug":59199,
"homePage":59197,
"icon-card-wallet":58881,
"icon-home":58882,
"icon-phone":58883
}
文件中对象的键可以自定义，代表字体标签的name，键值是字体标签的十进制数值。
得到十进制数值的方法：
第一种：用字体图标的字符码中的十六进制码直接转换，然后手动添加到json文件中（适用于数量较小的文件）
转换方法1
忽略前面的&#x，后面的数值即为字体图标的十六进制码，将其转换为十进制数值即可。转换地址
第二种：当数量很多时，借助ptyon工具。由于使用react-native时mac上面已经安装过了python，直接使用即可。
首先，打开新的终端，安装fonttools
pip install fonttools
然后在github上面克隆react-native-iconfont-mapper项目，并将iconfont.ttf文件放在项目的根目录下，
转换方法2-1
打开新的终端，进入
react-native-iconfont-mapper目录下，命令行运行
python iconfont-mapper.py iconfont.ttf iconfont.js
生成iconfont.js文件
转换方法2-2
打开js文件，里面的数值就是我们json文件中需要的数值
//inconfont.js
var map = {"xiaoxi":"59200","icons-card-wallet":"58881",
"icons-home":"58882","icons-phone":"58883","shouye":"59197","yaopin":"59199",};
;module.exports = (name)=>String.fromCharCode(map[name]);
;module.exports.map = map;
在上面工作都做好后，在App.js文件中就可以调用了。
//App.js
import React, {Component} from 'react';
import {StyleSheet,View} from 'react-native';
import Icon from 'react-native-vector-icons/iconfont';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Icon name='message' size={15} color='red' ></Icon>
<Icon name='drug' size={20} color='black'></Icon>
<Icon name='homePage' size={25} color='blue'></Icon>
<Icon name='icon-card-wallet' size={25} color='balck'></Icon>
<Icon name='icon-home' size={30} color='red'></Icon>
<Icon name='icon-phone' size={40} color='black'></Icon>
<Icon name='icon-phone' size={40} color='red'></Icon>
</View>
);
}
}
结果如下：
效果2
注：安卓运行记得将iconfont.ttd放在android->app->src->main->assets->fonts文件夹下，并重新安装apk即可。
具体借鉴react-native-vector-icons的集成心得
