1. 安裝react-native-vector-icons
yarn add react-native-vector-icons react-native link
如果沒有關聯成功的話,可以參考官方文檔手動配置一下
2. 將從阿里下載的iconfont.tff文件復制到以下目錄
3. 在android/app/build.gradle
中添加:
project.ext.vectoricons = [ iconFontNames: ['iconfont.ttf' ] //添加你需要賦值的字符文件 ] apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
4. 在項目中創建字體配置文件
// DIYIcon.js import createIconSet from 'react-native-vector-icons/lib/create-icon-set'; import glyphMap from './iconfont.json'; const iconSet = createIconSet(glyphMap, 'DIYIcon', 'iconfont.ttf'); // 'DIYIcon'可自定義名稱 export default iconSet; export const Button = iconSet.Button; export const TabBarItem = iconSet.TabBarItem; export const TabBarItemIOS = iconSet.TabBarItemIOS; export const ToolbarAndroid = iconSet.ToolbarAndroid; export const getImageSource = iconSet.getImageSource;
// iconfont.json { "glass": 61440, "music": 61441, "search": 61442, "envelope-o": 61443, "heart": 61444, "star": 61445, "star-o": 61446, "user": 61447, //等等... }
附iconfont.json自動提取的方法:
4.1 安裝python
點擊下載pthon安裝包https://www.python.org/ftp/python/2.7.14/python-2.7.14.msi
等待安裝完成!
4.2 配置python環境變量
在path中添加 python安裝目錄以及Scripts

4.3 安裝 fonttools
pip install fonttools
具體介紹請參考:github地址
4.4 准備react-native-iconfont-mapper
直接打包下載react-native-iconfont-mapper,或者通過git克隆到本地,這個目錄自己選個容易記住的,因為以后用的比較多。

項目比較單一,僅僅一個python文件。
4.5 提取字符表
將前面下載的字體包中的ttf文件拷貝到這里

python iconfont-mapper.py iconfont.ttf iconfont.js

不出意外,可以生成一個iconfont.js文件,打開查看便可以看到我們所需要的json字符串

4.6 新建iconfont.json
{ "home": 58880, "setting": 58881, "code": 58886, "money": 58951, "phone": 58952, "user": 58890, "customer": 58993, "message": 59034, "add": 59418, "password": 58910 }
這里需要注意,剛才生成的字符表json對象后面的值有引號,這里需要刪除
5. 使用
import DIYIcon from './diyicon/DIYIcon'; ... <DIYIcon name={'glass'} size={'50'} color={'#ed4040'} />
參考:
http://www.imbeta.cn/zai-react-nativezhong-you-ya-de-shi-yong-iconfont.html
https://segmentfault.com/a/1190000009939727
https://www.jianshu.com/p/332198bf46a7