先決條件

• rn 0.23
• npm 3.7.3
• node 5.9.1
• system winX
• python 2.7.x

前言

開發(fā)過程中各式各樣的圖標(biāo)自然少不了,如果能使用fontawesome等圖標(biāo)字體,自然可以帶來極大的方便,然而在rn中并無法直接引用,還好已經(jīng)有人做好了相關(guān)組件,react-native-vector-icons便是其中的佼佼者.
　　如果你對(duì)此組件感興趣可以去github頁面star此項(xiàng)目
　　https://github.com/oblador/react-native-vector-icons

安裝

官方README如何使用已經(jīng)寫得很詳細(xì),此處需要指出的是幾個(gè)注意點(diǎn).
　　由于安裝時(shí)依賴node-gyp,而node-gyp在win下又會(huì)有一堆依賴這里以winX為例說一下winX下需要安裝的依賴

1.python環(huán)境:截止博客發(fā)表時(shí)僅支持到2.7.X版本,如果是下載的zip包需要將python路徑添加到環(huán)境變量中

2.vs c++:為了方便 我直接安裝了Microsoft Visual Studio Express
npm install react-native-vector-icons --save

3.rnpm:npm install rnpm -g

使用

確保以上三點(diǎn)沒問題后,可以通過如下命令安裝本組件

    npm install react-native-vector-icons --save

由于我是開發(fā)android App,所以依據(jù)官方文檔繼續(xù)執(zhí)行

    rnpm link

在所需使用圖標(biāo)的地方,這里采用的是es6的寫法,es5的寫法也是可以的

    import Icon from 'react-native-vector-icons/FontAwesome';

使用組件

    <Icon name="qq" size={30} color="#52C0FE"/>

備注

參數(shù)說明

|參數(shù)|類型|默認(rèn)值|說明|
|--------------------|
|name|String|無|圖標(biāo)名稱,這里需要注意的是 如果你使用font-awesome的圖標(biāo),例如qq僅寫qq即可,無需寫fa fa-qq|
|size|數(shù)值|12|圖標(biāo)的大小|
|color|rn支持的顏色格式|自動(dòng)繼承|圖標(biāo)的顏色|

支持的圖標(biāo)

• Entypo by Daniel Bruce (411 icons)
• EvilIcons by Alexander Madyankin & Roman Shamin (v1.8.0, 71 icons)
• FontAwesome by Dave Gandy (v4.5, 605 icons)
• Foundation by ZURB, Inc. (v3.0, 283 icons)
• Ionicons by Ben Sperry (v2.0.1, 733 icons)
• MaterialIcons by Google, Inc. (v2.1.1, 893 icons)
• Octicons by Github, Inc. (v3.5.0, 196 icons)
• Zocial by Sam Collins (v1.0, 100 icons)

錯(cuò)誤記錄
未正確安裝python會(huì)出現(xiàn)

-gyp ERR! configure error 
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack  

未正確安裝vs c++會(huì)出現(xiàn)

未能加載Visual C++ 組件VCBuild.exe ”，要求安裝.NET FramMS Build 、.NET Framework 2.0 SDK 、 Microsoft Visual Studio 2005。