使用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代替就可以了。