react-native-vector-icons 使用

wilsonYang發表於2017-12-27
React

react-native-vector-icons 使用

react-native-vector-icons

一. 切換到工程目錄，執行

執行安裝命令

      npm install react-native-vector-icons --save
      或者 
      yarn add react-native-vector-icons
複製程式碼

注意：目前npm5存在安裝新庫時會刪除其他庫的問題，可能後面會修復導致專案無法正常執行。請儘量使用yarn代替npm操作。

執行以下命令連結原生庫

    react-native link react-native-vector-icons
複製程式碼
二. ios配置（ios需要單獨匯入字型檔案，安卓link完就可以用了）

1,右鍵工程檔案Add Files to "(你工程名)"

react-native-vector-icons 使用

2,選擇node_modules/react-native-vector-icons/Fonts資料夾

react-native-vector-icons 使用

三. 使用

使用的時候就可到圖片庫地址進行搜尋需要的圖示了

eg:  
搜尋 add  會出現如下的圖片  
複製程式碼

react-native-vector-icons 使用

使用的時候首先要引入
react-native-vector-icons
複製程式碼

但是 react-native-vector-icons下有很多圖片集 引入的時候使用那個能
這裡有一個小技巧比如我要引入add-to-list這個圖示

react-native-vector-icons 使用

    引入的時候只需要在react-native-vector-icons後對應的模組名就行了  
    
    import Icon from 'react-native-vector-icons/Entypo';
   
   如引入 
    import Icon from 'react-native-vector-icons/Ionicons';
    
    
    import Entypo from 'react-native-vector-icons/Entypo';
複製程式碼

參考

https://www.jianshu.com/p/a25e4ecce60f

關注微信公眾號獲取更多內容

react-native-vector-icons 使用

相關文章