做一個(gè)有情懷的程序員
react-native-vector-icons圖標(biāo)庫(kù)中有很多圖標(biāo)春贸，但并不是完全符合我們的需求泌类，在開(kāi)發(fā)過(guò)程中往往都是由美工給出效果圖主守，我們根據(jù)效果圖繪制UI界面雌团，如此一來(lái)就會(huì)發(fā)生圖標(biāo)風(fēng)格不匹配等問(wèn)題，那有沒(méi)有可能使用自定義圖標(biāo)呢僧诚？答案是肯定的，但必須是SVG格式且要借助于第三方網(wǎng)站如：阿里巴巴矢量圖標(biāo)庫(kù)蝗碎、icomoon.io等湖笨。
配置工作：
1.假設(shè)你已經(jīng)成功配置了react-native-vector-icons，如果沒(méi)有配置請(qǐng)移步React Native第三方組件之react-native-vector-icons蹦骑。
2.登錄阿里巴巴矢量圖標(biāo)庫(kù)慈省，搜索并選擇你需要的圖標(biāo)，加入到項(xiàng)目中眠菇，如圖1边败；
3.選擇好所有圖標(biāo)后，點(diǎn)擊頁(yè)面右上角購(gòu)物車按鈕（上面會(huì)顯示你所選圖標(biāo)的總數(shù)）捎废，如圖2笑窜；
4.點(diǎn)擊添加到項(xiàng)目按鈕，如圖3登疗；
5.將圖標(biāo)添加到項(xiàng)目排截，你可以選擇已有項(xiàng)目，也可以新增項(xiàng)目辐益，然后確定断傲，如圖4-5；
6.選擇每一個(gè)圖標(biāo)上的編輯按鈕可以調(diào)整圖標(biāo)的大小智政、位置认罩、可以看到圖標(biāo)的16進(jìn)制編碼，全部調(diào)整好后续捂，將文件下載到本地垦垂，如圖6-7宦搬；
7.打開(kāi)下載后的文件夾，找到 iconfont.ttf 文件乔外，并將文件復(fù)制到react項(xiàng)目中的/node_modules/react-native-vector-icons/Fonts 目錄下床三。
8.使用Terminal進(jìn)入項(xiàng)目根目錄，執(zhí)行react-native link 命令杨幼，等待執(zhí)行完成撇簿。
9.在/node_modules/react-native-vector-icons/glyphmaps/ 目錄下新建iconfont.json 文件，文件內(nèi)容如下：
{
"home" : 58912,
"category" : 58880,
"cart" : 58892,
"mine" : 58948
}
key是項(xiàng)目中使用的圖片name字段差购，value就是最初上傳圖標(biāo)后四瘫，圖標(biāo)下方的16進(jìn)制轉(zhuǎn)成10進(jìn)制的數(shù)值。如何將16進(jìn)制轉(zhuǎn)成10進(jìn)制請(qǐng)移步在線進(jìn)制轉(zhuǎn)換
10.在/node_modules/react-native-vector-icons/ 目錄下新建iconfont.js 文件欲逃，文件內(nèi)容如下：
/**
* Created by ice on 2017/8/27.
*/
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;
至此找蜜，配置工作全部完成，可以到項(xiàng)目中盡情的享用了稳析。
使用
1.在頁(yè)面中導(dǎo)入組件import Icon from 'react-native-vector-icons/iconfont';然后就可以使用了洗做；
import React, { Component } from 'react';
import {AppRegistry,View} from 'react-native';
import Icon from 'react-native-vector-icons/iconfont';
export default class icons2 extends Component {
render() {
return (
<View style={styles.container}>
<Icon name={'home'} size={26} color="red"/>
<Icon name={'category'} size={26} color="red"/>
<Icon name={'cart'} size={26} color="red"/>
<Icon name={'mine'} size={26} color="red"/>
</View>
);
}
}
AppRegistry.registerComponent('icons2', () => icons2);
2.以下是我使用react-navigation寫的簡(jiǎn)單的頁(yè)面跳轉(zhuǎn)的Demo，其中的圖標(biāo)就是使用的自定義圖標(biāo)彰居，源碼就不獻(xiàn)丑了诚纸，看看效果圖吧。
結(jié)語(yǔ)：
自定義圖標(biāo)教程就到這里陈惰，有任何問(wèn)題可以留言或者私信我畦徘，說(shuō)的不對(duì)的地方請(qǐng)提出且包涵，謝謝抬闯！
