原标题:React-Native配置自定义字体文件
React-Native设置自定义字体文件
今天主要说说如何通过字体文件加载应用中的一些图标
首先推荐一个网站iconfont-阿里巴巴矢量图标库,这里有海量的图标,可以下载你想要的各种矢量图标,你也可以在注册并登陆账号后,把自己想要的图标打包、下载为文件
A.关于组件
通过fontFamily可以指定显示的字体文件,下文将详细说明
B.代码
C.效果图
用字体文件加载图标
现下面说重点
A.从中选择适合的图标,并打包下载
B.下载后得到如下文件,iconfont.tff即为所需文件
C.在根工程目录下创建assets/fonts/文件夹,导入iconfont.ttf文件
1、iOS
把fonts文件夹拖到iOS工程目录下
另外还需要在info.plist文件key为 Fonts provided by application的Array中添加item fonts/iconfont.ttf,到此为止,已经可以在RN项目中使用对应fontFamily:iconfont中的字体图标了
2、安卓
之所以在工程目录下创建assets/fonts这样的路径,就是为了iOS和Android统一,因为Android必须要把字体文件放在[project root]/android/app/src/main/assets/fonts/文件夹下才能生效,好吧,我们把工程目录下的assets拷贝一份(可以通过编写脚本自动执行)到Android/app/src/main目录下
3、使用
效果就是文章开篇的效果图了
4、弊端
图标对应的unicode码(如:``````)跟显示的图标没有直接的对应关系
@IMWeb前端社区
本文由作者授权转发
http://www.jianshu.com/p/96d5c66791c3
微信ID:IMWebTech返回搜狐,查看更多
责任编辑: