美文网首页react native学习专题程序员
使用react-native-vector-icons自定义图标

使用react-native-vector-icons自定义图标

作者: 请叫我啊亮 | 来源:发表于2017-08-11 10:47 被阅读157次

    声明:本文假定已经正确配置好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的众多自带文本库配置的

    相关文章

      网友评论

        本文标题:使用react-native-vector-icons自定义图标

        本文链接:https://www.haomeiwen.com/subject/qsjlrxtx.html