相信很多人都已经用过了类似react-native-vector-icons
这样的组件吧!但是在很多时候,我们会遇到诸如“怎么我需要的图标这个库里面找不到呀”,“我们自己的ui设计了一套图标怎么用起来呀”之类的问题。没错没错,这个时候我们就需要提到iconfont了!
iconfont,顾名思义,就是图标字体。它是将矢量图标做成字体,大大的减小了琐碎文件的个数,也方便了前端人员使用,而为大家所熟知的无疑就是阿里的iconfont网站啦[iconfont.cn], 在这个网站上存在着很多设计师们设计出来的好看的小图标,我们只需要将他们一个个的添加到购物车里再点击下载代码就可以得到ttf文件了!
到底如何使用这个ttf文件呢?接下来就进入到干货环节。首先打开解压出来的文件夹之中的demo_unicode.html
,在这里可以看到很多的图标预览以及图标所对应的Unicode值。比如说是
的,这个&#x
意思就是宽字符,而e697则是宽字符的内容啦。在react-native中怎么使用呢?其实就是利用Text组件,设置fontFamily为设置过的字体之后,将内容设置为’\ue697’就可以展示图标了!color是颜色,fontSize是大小,是不是非常简单~
为了方便使用,我们可以将宽字符串做成一个map,key-value映射,这样就能非常方便的将其封装称组件并使用了,而不是每一次要使用的时候都要去查一遍对应的宽字符到底是什么。
let font