CONS是矢量圖，可以直接使用圖片名, 就能加載圖片的第三方,使用很方便, 你不需要在工程文件夾里塞各種圖片, 字體圖標(biāo)的使用在開(kāi)發(fā)中常常有意想不到的趣味性，和便捷而且大小顏色等定義相對(duì)于圖片而言實(shí)在是方便不少；
剛?cè)隦N 不久今天遇到了點(diǎn)坑，現(xiàn)在分享總結(jié)一下 react-native-vector-icons的簡(jiǎn)單使用，雖然之前也看了需要地方的教程，但是可能因?yàn)榘姹镜脑颍\(yùn)行項(xiàng)目都是包無(wú)法加載字體文件；本文所在系統(tǒng) 為 IOS下，
- 初始化 React-native 項(xiàng)目工程，還不會(huì)的同學(xué)可以參考一下，RN 中文網(wǎng)
- 項(xiàng)目初始化完成后進(jìn)入當(dāng)前項(xiàng)目 安裝字體圖標(biāo)庫(kù) ，終端中運(yùn)行
npm install react-native-vector-icons --save 回車下載安裝依賴包
- 打開(kāi)x-code 打開(kāi)RN 項(xiàng)目里面的IOS 文件下面的 x-code 文件
點(diǎn)擊當(dāng)前文件 右鍵添加下載好的 react-native-vector-icons 字體圖標(biāo)文件
添加 字體文件到當(dāng)前項(xiàng)目，選擇如下
路徑大概是這樣的： RN項(xiàng)目/node_modules/react-native-vector-icons/Fonts
- 回到當(dāng)前RN 項(xiàng)目下，使用 rnpm 讓剛才添加的字體文件關(guān)聯(lián)到RN項(xiàng)目中使用（使其資源與Xcode進(jìn)行連接），如果沒(méi)有 安裝rnpm 可以使用 sudo npm install rnpm -g 安裝 安裝完成后 rnpm -V 查看是否安裝成功，成功則會(huì)顯示對(duì)應(yīng)的版本號(hào)，運(yùn)行 rnpm link ，等待關(guān)聯(lián)成功
- 這個(gè)時(shí)候你可以到x -code 中查看字體資源是否已經(jīng)加載到項(xiàng)目中了
- 到這來(lái)我們已經(jīng)可以任意的使用字體圖標(biāo)了，項(xiàng)目中
//引用
import Ionicons from "react-native-vector-icons/Ionicons";
// 使用
<Ionicons name={ "ios-home" } size={26}/>
到此教程就完畢了，總結(jié)一下，只要注意一下順序，并不像其他教程一下需要在x-code 的 info 中一一去加關(guān)聯(lián)的字體，理論上只要 react-native-vector-icons 支持的圖標(biāo)庫(kù)都可以通過(guò)這樣的方式快速導(dǎo)入使用，當(dāng)然有人問(wèn)了: 那對(duì)應(yīng)的圖標(biāo)的名稱怎么查詢 ？
就支持的 Font Awesome為例子
//引用
import FontAwesome from "react-native-vector-icons/FontAwesome";
// 使用（可能需求去掉 字體名稱前綴 這里是 fa）
<FontAwesome name={ "address-book" } size={26}/>
至于其他的圖標(biāo)庫(kù)，也是類似再舉個(gè)ionicons 的??
到官網(wǎng)找到你需要的字體圖標(biāo)
//引用
import Ionicons from "react-native-vector-icons/Ionicons";
// 使用 （需要把 ion-ionic 修改成 ios- ionic ）
<Ionicons name={ "ios- ionic" } size={26}/>
至于其他的同理，大家多去嘗試一下就可以了，字體庫(kù)都關(guān)聯(lián)到項(xiàng)目了，怎么用多多嘗試就好，其實(shí)大概是這樣的修改名字，我也只是猜測(cè)，沒(méi)想到果然如此；當(dāng)然可以自定義圖標(biāo)庫(kù)，關(guān)聯(lián)使用；
如果覺(jué)得不錯(cuò)，路過(guò)不要忘記點(diǎn)贊哦 敏吶~~
