眾所周知，精致小巧的圖標(biāo)對(duì)一個(gè)產(chǎn)品的顏值影響比較大，在使用react-native+expo開(kāi)發(fā)app的過(guò)程中，內(nèi)部提供的icon圖標(biāo)總是有的差強(qiáng)人意，解決這一痛點(diǎn)的辦法就是自定義一個(gè)icon圖標(biāo)庫(kù)。

詳細(xì)步驟：

1：在阿里巴巴的矢量圖標(biāo)庫(kù)中選取需要的圖標(biāo)并打包一起下載

2：復(fù)制下載的iconfont.ttf文件到@expo/fonts中

3：在@expo/vector-icons/vendor/react-native-vector-icons/glyphmaps下新建Iconfont.json文件；然后打開(kāi)之前下載的iconfont.css文件，把對(duì)應(yīng)icon的16進(jìn)制編碼轉(zhuǎn)換成10進(jìn)制，然后按照（圖標(biāo)名：對(duì)應(yīng)10進(jìn)制編碼）的格式記錄在剛剛新建的Iconfont.json文件中。

4：在@expo/vector-icons下新建Iconfont.js文件，內(nèi)容代碼如下（附示例截圖）

import glyphMap from './vendor/react-native-vector-icons/glyphmaps/Iconfont.json';

import createIconSet from './createIconSet';?

export default createIconSet(glyphMap, 'iconfont', require('./fonts/iconfont.ttf'));

5：找到@expo/vector-icons下的index.js，添加該段代碼

6：在你要使用的組件中導(dǎo)入自定義的icon組件，直接使用即可

import { Iconfont } form "@expo/vector-icons"

name={iconName}?

size={number}

color={fontColor}

/>

嗯，現(xiàn)在就可以按照自己的需要定制icon圖標(biāo)啦。

因?yàn)槟壳皼](méi)有項(xiàng)目文件的參照，上面的@expo/xxx 路徑可能也許大概有點(diǎn)小問(wèn)題~~，機(jī)智的小伙伴們肯定能夠發(fā)現(xiàn)的。(????)

哈希表小伙伴建議clone懂美味代碼，除了字體放在assets/fonts下，其余代碼參照參照util文件夾。

復(fù)制腳本文件fix_modules.sh，修改完成后命令行執(zhí)行bash?fix_modules.sh

Thanks?(?ω?)?