在 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...