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