前言
React Native大火大熱，其中為了解決圖標(biāo)，易于修改，換顏色，高清等需求，你還是選擇切多套png來(lái)適配嗎？答案當(dāng)然是否定的！不知從何時(shí)起，扁平化圖標(biāo)成為潮流，iconfont也應(yīng)運(yùn)而生，最先接觸iconfont已是多年前的事了，那時(shí)候只知道怎么在web上使用，它帶來(lái)的便捷性和可擴(kuò)展性也是大家有目共睹。
最先接觸iconfont這一概念還是從一些國(guó)外的圖標(biāo)網(wǎng)站得來(lái)，譬如flaticon、icomoon，但這些畢竟都是國(guó)外的平臺(tái)，身在大天朝說(shuō)實(shí)話(huà)用的有些不習(xí)慣，這時(shí)候iconfont.cn應(yīng)運(yùn)而生，完全針對(duì)中國(guó)的iconfont平臺(tái)，在使用上最起碼很順手。好了，說(shuō)了這么多只想重申一點(diǎn)，iconfont你值得擁有，無(wú)論事web，還是app，亦或是我們今天的主角（react-native）。
一、react-native-vector-icons 概述
這個(gè)是在GitHub上最火的react-native圖標(biāo)庫(kù)，使用起來(lái)簡(jiǎn)單高效，其中內(nèi)置市面上大部分開(kāi)源的圖標(biāo)庫(kù)，我們只需要簡(jiǎn)單的配置，即可馬上體驗(yàn)iconfont帶來(lái)的快感，雖然其官方倉(cāng)庫(kù)已經(jīng)有很清楚的步驟帶領(lǐng)我們一步步配置，這里我還是以我自己通俗的理解做下步驟講解：
二、react-native-vector-icons安裝和配置
npm install --save react-native-vector-icons
//或者
npm install -g yarn
yarn add react-native-vector-icons
1、android平臺(tái)
1.1、自動(dòng)配置
react-native link react-native-vector-icons
// 或者
npm install -g rnpm
rnpm link react-native-vector-icons
會(huì)為你配置好所有，但是這是成功的情況下，你不需要操心任何事，但是往往不能如愿。如果你這步成功了，而且能夠正常運(yùn)行，下面這些你就可以跳過(guò)！
1.2、手動(dòng)配置
1.2.1 復(fù)制字體文件（這一步千萬(wàn)不能忘記，不然就算運(yùn)行成功你也看不到圖標(biāo)）
找到項(xiàng)目node_modules/react-native-vector-icons/Fonts，里面有很多已經(jīng)內(nèi)置的圖標(biāo)庫(kù)字體文件，依照自己的需求，復(fù)制你需要的字體文件到 android/app/src/main/assets/fonts，（如果沒(méi)有這個(gè)目錄就自行創(chuàng)建）
1.2.2 配置 android/settings.gradle
在現(xiàn)有的代碼基礎(chǔ)上添加如下代碼：
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()
);
}
到這里配置就全部完成，接下來(lái)就可以在rn項(xiàng)目中使用iconfont
import Icon from 'react-native-vector-icons/dist/Ionicons';
<Icon name='ios-settings' size={16} color="#fff"/>
2、ios平臺(tái)
相對(duì)android來(lái)說(shuō)簡(jiǎn)單很多，可以參照github上面的步驟來(lái)！
三、使用自定義iconfont
說(shuō)了這么多，還只是它自帶的圖標(biāo)庫(kù)的使用，如果我們要使用自己自定義的一些圖標(biāo)呢，譬如iconfont.cn上面的
1、圖標(biāo)準(zhǔn)備
如上圖，作為測(cè)試，我準(zhǔn)備了上述圖標(biāo)。點(diǎn)擊下載至本地，里面包含所有的字體文件。找到iconfont.ttf，這是我們重點(diǎn)需要的文件。
2、react-native-vector-icons結(jié)構(gòu)分析
如下圖，找到node_modules/react-native-vector-icons的根目錄，可以看到很多js文件，命名都是以圖標(biāo)庫(kù)的名稱(chēng)命名，隨便打開(kāi)一個(gè)Ionicons.js，發(fā)現(xiàn)代碼很簡(jiǎn)單
把這個(gè)文件復(fù)制一遍，重命名為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;
從上面的代碼我們不難看出，我們還需要個(gè)Iconfont.json文件，順著路徑可以找到很多json文件。
這就是接下來(lái)要整理出來(lái)的字符對(duì)應(yīng)表。當(dāng)然你可以手動(dòng)去整理，一個(gè)兩個(gè)的還可以，如果一個(gè)項(xiàng)目幾十上百個(gè)甚至更多呢，能用工具去解決的事，我們絕不浪費(fèi)時(shí)間，接下來(lái)介紹的就是如何利用工具去獲取字符表。
2.1 安裝python
點(diǎn)擊下載pthon安裝包https://www.python.org/ftp/python/2.7.14/python-2.7.14.msi
等待安裝完成！
2.2 配置python環(huán)境變量
在path中添加 python安裝目錄以及Scripts
2.3 安裝 fonttools
pip install fonttools
具體介紹請(qǐng)參考：github地址
2.4準(zhǔn)備react-native-iconfont-mapper
直接打包下載react-native-iconfont-mapper，或者通過(guò)git克隆到本地，這個(gè)目錄自己選個(gè)容易記住的，因?yàn)橐院笥玫谋容^多。
項(xiàng)目比較單一，僅僅一個(gè)python文件。
2.5 提取字符表
將前面下載的字體包中的ttf文件拷貝到這里
python iconfont-mapper.py iconfont.ttf iconfont.js
不出意外，可以生成一個(gè)iconfont.js文件，打開(kāi)查看便可以看到我們所需要的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對(duì)象后面的值有引號(hào)，這里需要?jiǎng)h除，由于個(gè)數(shù)比較少，我還是選擇手動(dòng)刪除，如果多的話(huà)還是推薦正則來(lái)批量刪除，但是還不會(huì)，希望有知道怎么操作的在下面留言。
到這里，擴(kuò)展react-native-vector-icons，添加自定義圖標(biāo)就完成了，接下來(lái)就可以像上面一樣引用iconfont圖標(biāo)了
import Icon from 'react-native-vector-icons/Iconfont'; // 不過(guò)引用的時(shí)候就要改成Iconfont了，其他的類(lèi)似
自定義iconfont的另外一種用法
上面那種方法是在react-native-vector-icons的基礎(chǔ)上擴(kuò)展其圖標(biāo)庫(kù)，但是有時(shí)候我們往往不需要去安裝這么大的一個(gè)庫(kù)，甚至去引用那么多字體文件，不知道大家是否還記得我們是怎么在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;
直接將這個(gè)文件拷貝到項(xiàng)目中，可以用如下的方式來(lái)直接使用
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>
)
}
}
重點(diǎn)提示：以上所有操作，都需要將字體文件拷貝到android/app/src/main/assets/fonts
