React Native如何添加自定义图标


iOS

1.通过xcode将‘xxx.ttf’文件引入项目,如图:

2.在node_modules/react-native-vector-icons下新建Icomoon.js文件,复制一份Icomoon.ttf到node_modules/react-native-vector-icons/Fonts目录下,node_modules/react-native-vector-icons/glyphmaps下新建Icomoon.json文件。如图:

Icomoon.js代码:

import createIconSet from './lib/create-icon-set';
import glyphMap from './glyphmaps/Icomoon.json';

const iconSet = createIconSet(glyphMap, 'Icomoon', 'Icomoon.ttf');

export default iconSet;

Icomoon.json格式如下:

{
  "icon_bofang": 6400,
  "icon_cai": 6401
}

想要获得Icomoon.jsom里面的格式内容  .json文件中的key自定随便,到时候使用的时候就用这个key,他的value从下载的字体文件夹中找到,也是一个json文件,打开后其中每一个对象有一个code键,它对应的value就是我们需要的那个值。但是图标的个数非常多,需要写一段代码,获得我们所需要的Icomoon.json里面的格式。

此时,在需要用到的界面引入Icomoon,使用图标,如下图:

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM