在 React Native 使用阿里 iconfont 圖標

熟悉前端開發的大家都一定知道 iconfont.cn，在網站下載圖標集，會自帶教程告訴你如何在網頁使用 iconfont。但是在 React Native 中，跟網頁使用的步驟就不同了。我最開始百度出來的文章，不少都推薦借用 react-native-vector-icons，但是我覺得這一步還是增加了不少無用代碼。
其實使用 iconfont，本質上就是使用一種“圖標形狀的字體”，所以解決問題只需要三步：

1. 安裝字體
2. 找到圖標對應的 unicode，直接放到 <Text> 標籤中
3. 在該標籤應用你的“圖標字體”

安裝字體

這是一個把配置都交給 react-native 的一個簡單方法：
首先在 package.json 添加代碼

"rnpm": {
    "assets": [
    "./assets/fonts/"
    ]
},

然後運行
react-native link
你就可以在 plist 文件（iOS）或 android/app/src/main/assets/fonts（安卓）中看到對應配置
安裝後需要重啓 react-native

添加圖標

打開在 iconfont 下載的圖標集會有這個文件

裏面可以看到對應圖標的 unicode

把你使用的圖標放到標籤中 <Text>{'\ue936'}</Text>

應用字體

<Text style={{
    fontFamily: "iconfont",
    fontSize: FONTSIZE,
    marginRight: 9
}}>{'\ue936'}</Text>

有一點需要注意，寫在 fontFamily 的字體名稱要使用全名（而不是文件名）

不過 iconfont 三個名字都一樣就是了

參考文章：
https://medium.com/react-nati...
http://www.ruanyifeng.com/blo...