RN（react native）入坑指南-05,使用表徵圖字型Fontawesome

先決條件 rn 0.23 npm 3.7.3 node 5.9.1 system winX python 2.7.x 前言

　　開發過程中各式各樣的表徵圖自然少不了,如果能使用fontawesome等表徵圖字型,自然可以帶來極大的方便,然而在rn中並無法直接引用,還好已經有人做好了相關組件,react-native-vector-icons便是其中的佼佼者.
　　如果你對此組件感興趣可以去github頁面star此項目
　　https://github.com/oblador/react-native-vector-icons 安裝

　　官方README如何使用已經寫得很詳細,此處需要指出的是幾個注意點.
　　由於安裝時依賴node-gyp,而node-gyp在win下又會有一堆依賴這裡以winX為例說一下winX下需要安裝的依賴

　　1.python環境:截止部落格發表時僅支援到2.7.X版本,如果是下載的zip包需要將python路徑添加到環境變數中

　　2.vs c++:為了方便 我直接安裝了Microsoft Visual Studio Express

　　3.rnpm:npm install rnpm -g 使用

確保以上三點沒問題後,可以通過如下命令安裝本組件

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

由於我是開發android App,所以依據官方文檔繼續執行

    rnpm link

在所需使用表徵圖的地方,這裡採用的是es6的寫法,es5的寫法也是可以的

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

使用組件

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

備忘

參數說明

參數	類型	預設值	說明
name	String	無	表徵圖名稱,這裡需要注意的是 如果你使用font-awesome的表徵圖,例如qq僅寫qq即可,無需寫fa fa-qq
size	數值	12	表徵圖的大小
color	rn支援的顏色格式	自動繼承	表徵圖的顏色

支援的表徵圖 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)

錯誤記錄
未正確安裝python會出現

-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++會出現

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