声明:本文假定已经正确配置好react-native-vector-icons
UI给的图片,需要是svg格式的,上传到第三方网站,如www.iconfont.cn,一些配置后,就可以在RN项目中使用,这样项目中就可以少导入很多图片。
登录上面网址,图标管理->我的项目->创建项目,然后导入所有你的svg格式图片,点击下载至本地,有用的是下载文件中的iconfont.ttf文件,以及每个图标下面的十六进制码,如e601
拷贝iconfont.ttf文件到项目的node_modules/react-native-vector-icons/Fonts下,再将iconfont.ttf拖到xcode,并且在info.plist添加对应的key,如下,10是刚手动添加的,其余为react-native link阶段自动生成的
接下来在node_modules/react-native-vector-icons目录下创建iconfont.js,内容就拷贝Ionicons.js,并将里面的Ionicons字段全部改成iconfont,如下
然后在node_modules/react-native-vector-icons/glyphmaps中创建iconfont.json,内容格式如下
key是项目中使用的图片name字段,value就是最初上传图标后,图标下方的十六进制转成10进制的数值。
使用和效果如下:
注:
1、网址的图标每次更换后,必须重新下载iconfont.ttf文件,并替换掉xcode和node_modules两处iconfont.ttf文件才能生效
2、只有纯色svg格式的图片才用这种方式管理,否则显示出来的东西没法看。。。
3、从步骤可以看出,完全是参考react-native-vector-icons的众多自带文本库配置的