React Native关于TabBar使用自定义矢量位图的流程

使用React Native开发项目中,TabBar使用png图标时总是有问题,于是决定使用自定义矢量位图,具体流程如下:

1.使用AI软件制作SVG格式图标;

2.访问http://fontello.com或者https://icomoon.io将制作好的svg格式图标上传上去,之后可以导出ttf格式文件以及一些附属文件;

3.将ttf格式文件通过xcode上传到IOS项目中(Android的需要传到android/app/src/main/assets/fonts下);

4.在导出的附属文件中有个config.json,将这个文件放到项目中;

5.在要使用的js文件中加入如下代码:

import { createIconSetFromFontello } from 'react-native-vector-icons';
import fontelloConfig from './config.json';
const Icon = createIconSetFromFontello(fontelloConfig);
TabBarItem使用Icon.TabBarItem代替就可以了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值