React-Native配置自定义字体文件

阿里巴巴矢量图标库中选择适合的图标,并打包下载

下载后得到如下文件,iconfont.tff
即为所需文件


在根工程目录下创建assets/fonts/
文件夹,导入iconfont.ttf
文件


  1. iOS
    把fonts
    文件夹拖到iOS工程目录下



    注意最终得到的是蓝色的文件夹

修改Info.plist
在info.plist文件中添加key为Fonts provided by application
的Array中添加itemfonts/iconfont.ttf
,到此为止,已经可以在RN项目(iOS端)中使用对应fontFamily
:iconfont
中的字体图标了如下图所示:

  1. Android
    之所以在工程目录下创建assets/fonts
    这样的路径,就是为了iOS和Android统一,因为Android必须要把字体文件放在[project root]/android/app/src/main/assets/fonts/
    文件夹下才能生效,好吧,我们把工程目录下的assets
    拷贝一份(可以通过编写脚本自动执行)到Android/app/src/main
    目录下


  2. 使用
<Text style={{ fontFamily:'iconApp',fontSize:26,color:'gray',marginTop:15}} >&#xe623;</Text>

fontFamily可以设置好几个字体库在文件里面,选择你需要的来添加。

当然,在RN,还可以用react-native-vector-icons
这个插件。

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

推荐阅读更多精彩内容