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

詳細步驟：

1：在阿里巴巴的矢量圖標庫中選取需要的圖標并打包一起下載

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

3：在@expo/vector-icons/vendor/react-native-vector-icons/glyphmaps下新建Iconfont.json文件；然后打開之前下載的iconfont.css文件，把對應icon的16進制編碼轉(zhuǎn)換成10進制，然后按照（圖標名：對應10進制編碼）的格式記錄在剛剛新建的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：在你要使用的組件中導入自定義的icon組件，直接使用即可

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

name={iconName}?

size={number}

color={fontColor}

/>

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

因為目前沒有項目文件的參照，上面的@expo/xxx 路徑可能也許大概有點小問題~~，機智的小伙伴們肯定能夠發(fā)現(xiàn)的。(????)

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

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

Thanks?(?ω?)?