1.需要引入的庫：
yarn add react-native-vector-icons
react-native link react-native-vector-icons
2.調(diào)用庫里面自帶的圖標
進入 node_mudules下的react-native-vector-icons庫的glyphmaps文件夾，發(fā)現(xiàn)有很多的json文件，每個json文件的內(nèi)容結(jié)構(gòu)如下：
{
"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值就是需要調(diào)用的圖標的name，在App.js文件選取Ionicons.js調(diào)用：
//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>
);
}
}
效果如下：
3.調(diào)用自定義的svg圖片文件（以Iconfont-阿里巴巴圖標矢量庫為例）
進入Iconfont-阿里巴巴圖標矢量庫，將所需要的圖標加入購物車
進入購物車后，點擊添加至項目
或需要上傳自己的圖標文件，需要點擊右上角上傳按鈕，將自己的Svg文件拖入網(wǎng)站中，選擇保留顏色并提交即可。
將項目中的圖標文件下載至本地
解壓本地的文件夾
打開
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;
發(fā)現(xiàn)需要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，鍵值是字體標簽的十進制數(shù)值。
得到十進制數(shù)值的方法：
第一種：用字體圖標的字符碼中的十六進制碼直接轉(zhuǎn)換，然后手動添加到j(luò)son文件中（適用于數(shù)量較小的文件）
忽略前面的&#x，后面的數(shù)值即為字體圖標的十六進制碼，將其轉(zhuǎn)換為十進制數(shù)值即可。轉(zhuǎn)換地址
第二種：當數(shù)量很多時，借助ptyon工具。由于使用react-native時mac上面已經(jīng)安裝過了python，直接使用即可。
首先，打開新的終端，安裝fonttools
pip install fonttools
然后在github上面克隆react-native-iconfont-mapper項目，并將iconfont.ttf文件放在項目的根目錄下，
打開新的終端，進入
react-native-iconfont-mapper目錄下，命令行運行
python iconfont-mapper.py iconfont.ttf iconfont.js
生成iconfont.js文件
打開js文件，里面的數(shù)值就是我們json文件中需要的數(shù)值
//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文件中就可以調(diào)用了。
//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>
);
}
}
結(jié)果如下：
注：安卓運行記得將iconfont.ttd放在android->app->src->main->assets->fonts文件夾下，并重新安裝apk即可。
具體借鑒react-native-vector-icons的集成心得
