前言
React Native大火大熱玫霎，其中為了解決圖標，易于修改妈橄，換顏色庶近，高清等需求，你還是選擇切多套png來適配嗎眷蚓？答案當然是否定的鼻种！不知從何時起，扁平化圖標成為潮流沙热，iconfont也應運而生叉钥，最先接觸iconfont已是多年前的事了罢缸，那時候只知道怎么在web上使用，它帶來的便捷性和可擴展性也是大家有目共睹投队。
最先接觸iconfont這一概念還是從一些國外的圖標網(wǎng)站得來枫疆，譬如flaticon、icomoon蛾洛，但這些畢竟都是國外的平臺养铸，身在大天朝說實話用的有些不習慣，這時候iconfont.cn應運而生轧膘，完全針對中國的iconfont平臺钞螟，在使用上最起碼很順手。好了谎碍，說了這么多只想重申一點鳞滨，iconfont你值得擁有，無論事web蟆淀，還是app拯啦，亦或是我們今天的主角（react-native）。
一熔任、react-native-vector-icons 概述
這個是在GitHub上最火的react-native圖標庫褒链，使用起來簡單高效，其中內(nèi)置市面上大部分開源的圖標庫疑苔，我們只需要簡單的配置甫匹，即可馬上體驗iconfont帶來的快感瓶珊，雖然其官方倉庫已經(jīng)有很清楚的步驟帶領我們一步步配置块攒，這里我還是以我自己通俗的理解做下步驟講解：
二、react-native-vector-icons安裝和配置
npm install --save react-native-vector-icons
//或者
npm install -g yarn
yarn add react-native-vector-icons
1例衍、android平臺
1.1薪贫、自動配置
react-native link react-native-vector-icons
// 或者
npm install -g rnpm
rnpm link react-native-vector-icons
會為你配置好所有恍箭，但是這是成功的情況下瞧省，你不需要操心任何事扯夭，但是往往不能如愿。如果你這步成功了鞍匾，而且能夠正常運行勉抓，下面這些你就可以跳過！
1.2候学、手動配置
1.2.1 復制字體文件（這一步千萬不能忘記藕筋，不然就算運行成功你也看不到圖標）
找到項目node_modules/react-native-vector-icons/Fonts，里面有很多已經(jīng)內(nèi)置的圖標庫字體文件，依照自己的需求隐圾，復制你需要的字體文件到 android/app/src/main/assets/fonts伍掀，（如果沒有這個目錄就自行創(chuàng)建）
1.2.2 配置 android/settings.gradle
在現(xiàn)有的代碼基礎上添加如下代碼：
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()
);
}
到這里配置就全部完成，接下來就可以在rn項目中使用iconfont
import Icon from 'react-native-vector-icons/dist/Ionicons';
<Icon name='ios-settings' size={16} color="#fff"/>
2暇藏、ios平臺
相對android來說簡單很多蜜笤，可以參照github上面的步驟來！
三盐碱、使用自定義iconfont
說了這么多把兔，還只是它自帶的圖標庫的使用，如果我們要使用自己自定義的一些圖標呢瓮顽，譬如iconfont.cn上面的
1县好、圖標準備
如上圖，作為測試暖混，我準備了上述圖標缕贡。點擊下載至本地，里面包含所有的字體文件拣播。找到iconfont.ttf晾咪，這是我們重點需要的文件。
2贮配、react-native-vector-icons結構分析
如下圖谍倦，找到node_modules/react-native-vector-icons的根目錄，可以看到很多js文件泪勒，命名都是以圖標庫的名稱命名剂跟，隨便打開一個Ionicons.js，發(fā)現(xiàn)代碼很簡單
把這個文件復制一遍酣藻，重命名為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;
從上面的代碼我們不難看出鳍置，我們還需要個Iconfont.json文件辽剧，順著路徑可以找到很多json文件。
這就是接下來要整理出來的字符對應表税产。當然你可以手動去整理怕轿，一個兩個的還可以，如果一個項目幾十上百個甚至更多呢辟拷，能用工具去解決的事撞羽，我們絕不浪費時間，接下來介紹的就是如何利用工具去獲取字符表衫冻。
2.1 安裝python
點擊下載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
具體介紹請參考：github地址
2.4準備react-native-iconfont-mapper
直接打包下載react-native-iconfont-mapper，或者通過git克隆到本地隅俘，這個目錄自己選個容易記住的邻奠，因為以后用的比較多笤喳。
項目比較單一，僅僅一個python文件碌宴。
2.5 提取字符表
將前面下載的字體包中的ttf文件拷貝到這里
python iconfont-mapper.py iconfont.ttf iconfont.js
不出意外杀狡，可以生成一個iconfont.js文件，打開查看便可以看到我們所需要的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對象后面的值有引號呜象，這里需要刪除，由于個數(shù)比較少碑隆，我還是選擇手動刪除恭陡，如果多的話還是推薦正則來批量刪除，但是還不會干跛，希望有知道怎么操作的在下面留言子姜。
到這里，擴展react-native-vector-icons楼入，添加自定義圖標就完成了哥捕，接下來就可以像上面一樣引用iconfont圖標了
import Icon from 'react-native-vector-icons/Iconfont'; // 不過引用的時候就要改成Iconfont了，其他的類似
自定義iconfont的另外一種用法
上面那種方法是在react-native-vector-icons的基礎上擴展其圖標庫嘉熊，但是有時候我們往往不需要去安裝這么大的一個庫遥赚，甚至去引用那么多字體文件，不知道大家是否還記得我們是怎么在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;
直接將這個文件拷貝到項目中，可以用如下的方式來直接使用
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>
)
}
}
重點提示：以上所有操作孕惜，都需要將字體文件拷貝到android/app/src/main/assets/fonts
