1.react-native-vector-icons安裝

先給項(xiàng)目安裝該庫
npm install react-native-vector-icons --save
iOS和安卓關(guān)聯(lián)該庫
react-native link

2.基礎(chǔ)使用

2.1庫基本使用

該庫自帶button,tabbarItem,navigatorItem使用
具體使用鏈接:https://github.com/oblador/react-native-vector-icons

2.2 View和Text使用

安卓使用只能使用第一種View
iOS使用倆種View和Text
引入需要使用的矢量圖庫 Ionicons可以替換
import Ionicons from'react-native-vector-icons/Ionicons'
具體代碼如下

<Ionicons    
 name = {‘ ios-information-circle’}     
 size    =  {26}    
 color  = { '#ccc' } />

size:代表矢量圖的大小
name:代表Ionicons庫中圖標(biāo)的名字
style:代表矢量圖格式

2.2.2View的使用

View添加圖片的使用
View包裹使用

<View style={{height: 30, width: 30}}>    
<Ionicons 
    name="ios-add-circle" 
    size={30} 
   color="#4F8EF7"/>
</View>

2.2.3Text的使用

Text包裹使用

<Text> hahha 
<Ionicons 
name='ios-information-circle' 
size={30} 
color='#4F8EF7'/> 
8888 
</Text>

3.自定義圖片的使用

3.1 createIconSet(glyphMap, fontFamily[, fontFile])

3.1.1 使用自定義的iconfont

前面基礎(chǔ)使用的該庫自帶的iconfont,如果要使用其他人或者自己制作的iconfont應(yīng)該怎么辦?例如使用阿里巴巴矢量圖標(biāo)庫上面的iconfont

4.png

1.png

點(diǎn)擊下載至本地并解壓縮,里面包含所需要的字體文件,找到iconfont.ttf,這是需要的文件
并且iconfont.ttf一定要放在node_modules/react-native-vector-icons/fonts/目錄下
并且執(zhí)行react-native link react-native-vector-icons
不然會報錯 iconfont.ttf該字體無法識別

3.png

3.1.2.react-native-vector-icons結(jié)構(gòu)分析

找到node_modules/react-native-vector-icons的根目錄坏挠，可以看到很多js文件邓深，命名都是以圖標(biāo)庫的名稱命名印叁，隨便打開一個Ionicons.js，發(fā)現(xiàn)代碼很簡單

5.png

其中glyphMap來自于Ionicons.json,則需要看一下Ionicons.json格式如下圖

6.png

由圖片可以看出Ionicons.json文件格式為 名字:十進(jìn)制數(shù)
則自定義的阿里巴巴矢量圖字符碼如下
將購物車圖標(biāo)添加到項(xiàng)目中,查看具體圖標(biāo)的字符碼

2.png

需要將&#x去帶只看e61f十六進(jìn)制,如果我們需要的矢量圖很少,則可以手動轉(zhuǎn)化

3.1.3自定義iconfont.js文件

7.png

8.png

9.png

如果字符碼成百個手動一個個轉(zhuǎn)化很耗時,這需要自動化生產(chǎn)iconfont.json過程如下:3.2

3.2安裝python

3.2.1

mac系統(tǒng)自帶不需要安裝
Windows安裝
參考點(diǎn)擊下載pthon安裝https://www.python.org/ftp/python/2.7.14/python-2.7.14.msi 等待安裝完成.

3.2.2配置python環(huán)境變量

在path中添加python安裝目錄以及Scripts

10.png

3.2.3準(zhǔn)備react-native-iconfont-mapper

直接打包下載react-native-iconfont-mapper糙捺，或者通過git克隆到本地，這個目錄自己選個容易記住的，因?yàn)橐院笥玫谋容^多髓废。
打開你本地下載的react-native-iconfont-mapper里面比較單一,只有一個iconfont-mapper.py python文件

3.2.4 提取字符表

將前面下載的字體包中的ttf文件拷貝到你下載的react-native-iconfont-mapper打開的目錄中如下

12.png

11.png

13.png

3.2.5 新建icon font.json

按照node_modules/react-native-vector-icons/glyphMaps/Ionicons.json格式創(chuàng)建iconfont.json
將上面的map = {"huchudianhua":"58910","laidianxianshi":"58911",}
復(fù)制,創(chuàng)建出 iconfont.json

{
"huchudianhua":"58910",
"laidianxianshi":"58911",
}

3.3 createIconSetFromFontello(config[, fontFamily[, fontFile]])`

在Fontello庫中下載矢量圖,鏈接http://fontello.com

14.png

15.png

3.3.1自定義fontello.js文件為

16.png

3.3.2在項(xiàng)目中使用

自定義的FontTello文件在文件的根目錄
import FontTello from "./ FontTello'"
定義的FontTello文件在node_modules/react-native-vector-icons的目錄
import FontTello from 'react-native-vector-icons/ FontTello'

17.png

3.4 createIconSetFromIcoMoon(config[, fontFamily[, fontFile]])

在IconMoon矢量圖中下載圖片 鏈接:https://icomoon.io/

19.png

23.png

3.4.1自定義icomoon.js文件為

24.png

3.4.2在項(xiàng)目中使用

自定義的Icomoon文件在文件的根目錄
import Icomoon from "./ Icomoon"
自定義的Myicon文件在node_modules/react-native-vector-icons的目錄
import Icomoon from 'react-native-vector-icons/ Icomoon

25.png

本文章有引用以下文章

http://www.reibang.com/p/332198bf46a7