在ReactNative中优雅的使用字体文件

接触ReactNative时间也不短啦,中间遇到的坑还是很多的,但是由于时间原因都没有及时记录下来,现在就从iconfont开始一点点积累吧。


要想优雅的使用iconfont,首先你要有iconfont字体文件,提到字体文件,阿里巴巴矢量图标库在国内可是首屈一指的啦,能翻墙的同学也可以看看国外的一个网站

没有账号的同学首先注册一个账号,然后我们可以直接搜索我们想要的图标,支持中英文喔。比如下面我搜索的添加图标


鼠标放在上面可以看到有立即下载、添加入库、添加到我的收藏里,我们直接添加入库,然后在点击右上角的购物车图标,把这个图标添加到我们自己创建的项目里。然后在图标管理我的项目中可以看到下载值本地

我们要的文件就是下图中高亮部分


到这里我们的字体文件就准备好了。

要想在Android中使用字体文件,我们就需要把字体文件拷贝到 /android/app/src/main/assets/fonts/  目录下

要想在IOS中使用,我们首先要把字体文件拖拽到工程里,同时勾选如下选项


然后在plist文件里添加 Fonts provided by Application

iconfont.ttf文件可以在xcode工程中创建一个单独的目录存放,并不影响使用,配置好之后别忘了要重启编译项目(IOS和Android)

最后我们在来看看在js中如何使用吧

图中的 &#xe64c 就是我们在阿里巴巴图标库中的哈希编码


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容