React-native项目中如何使用阿里字体库呢？

react-native项目中很多人推荐使用react-native-vector-icons，但我个人觉得不够灵活，且操作过于复杂，于是考虑使用阿里字体库。

熟悉前端开发的大家都一定知道 iconfont.cn，在网站下载图标集，会自带教程告诉你如何在网页使用 iconfont。但是在 React Native 中，跟网页使用的步骤就不同了。

首先：添加自己需要的字体

第二步：打包下载

第三步：配置项目

把下载好的字体文件夹里的iconfon.tff复制到src/assets/fonts里

在根目录中配置react-native.config.js文件

内容如下：

module.exports = {assets: ['./src/assets/fonts/'],
};

第四步：终端运行命令

react-native link

第五步：页面使用

<Text style={{fontFamily:'iconfont'}}></Text>

注意：如果页面不能显示，重新run一下android就可以了！

React-native项目中如何使用阿里字体库呢？相关推荐

如何高效管理 React Native 项目中的图片资源
本文为 Marno 原创,转载必须保留出处! 公众号[ Marno ],关注后回复 RN 加入交流群 React Native 优秀开源项目大全:http://www.marno.cn 前言刚开始写 ...
技术实践丨React Native 项目 Web 端同构
摘要:尽管 React Native 已经进入开源的第 6 个年头,距离发布 1.0 版本依旧是遥遥无期."Learn once, write anywhere",完全不影响 Re ...
React Native项目配置路由和选项卡导航__React Navigation的使用
React Native 配置路由在网上看了很多例子跟着写,发现都不行,发现之前的写法都已经弃用了,跟着官方一步步来吧. 参考官方文档:React Navigation 先创建好项目: npx re ...
React native 项目进阶(redux, redux saga, redux logger)
之前利用知乎日报的api写了react-native的一个入门项目,传送文章地址React Native 项目入门和源码地址RN入门项目源码,目前github上的代码已经在原文的基础上增加了新的功能, ...
React Native工程中TSLint静态检查工具的探索之路
背景建立的代码规范没人遵守,项目中遍地风格迥异的代码,你会不会抓狂? 通过测试用例的程序还会出现Bug,而原因仅仅是自己犯下的低级错误,你会不会抓狂? 某种代码写法存在问题导致崩溃时,只能全工程检查 ...
在vue项目中使用第三方的字体图标库
如何在vue项目中使用第三方的字体图标库以在vue项目中导入阿里字体图标库为例 1.打开阿里字体图标库的官方网址 https://www.iconfont.cn/?spm=a313x.7781069 ...
阿里巴巴矢量图标库项目中使用svg格式字体图标使用方式及封装
一.首先登陆阿里云矢量图标库,把需要的字体图标加入到自己的项目中二.阿里云图标的四种方式(推荐第三种方式引入,如果不考虑网络问题可以用在线引入的方式) 进入项目以后会看到阿里云可以选择三种方式进行导 ...
React Native 项目整合 CodePush 完全指南
作者 | 钱凯杏仁移动开发工程师,前嵌入式工程师,关注大前端技术新潮流. 本文使用的环境: React@16.3.1 React Native@0.55.4 react-native-code-pu ...
【腾讯Bugly干货分享】React Native项目实战总结
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 "8小时内拼工作,8小 ...
React Native 项目常用第三方组件汇总
React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_conte ...

React-native项目中如何使用阿里字体库呢？

React-native项目中如何使用阿里字体库呢？相关推荐

最新文章

热门文章