react-native中使用自定义的字体图标iconfont
iconfont图标库下载
可在 http://www.iconfont.cn
下载
下载完成后的目录中有字体文件:
iconfont.ttf
拷贝字体文件
Android:
在 Android/app/src/main
目录下新建文件夹 assets/fonts/
然后将iconfont.ttf文件拷贝到assets/fonts/目录下
使用
在下载的字体文件夹中有demo_unicode.html文件
打开文件,在界面有显示图标以及对应的unicode
码值,如
- 在Text标签中使用
- 并设置
style:{fontFamily : 'iconfont'}
。如:
1
|
<Text style={{fontFamily:'iconfont'}}></Text>
|
更方便的使用
在Text标签中可以直接写入
但是如果要使用变量来表示,则不能使用同样的字符串,需要使用对应的unicode字符串。
例如:
应使用 \ue697
来表示。
完整示例:
1
2
|
let back = '\ue697';
<Text style={{fontFamily:'iconfont'}}>{back}</Text>
|
react-native中使用自定义的字体图标iconfont的更多相关文章
- 教你轻松在React Native中使用自定义iconfont
在react-native项目中我们一般使用到 react-native-vector-icons(这里不介绍如何使用react-native-vector-icons按照官方文档即可)但是当reac ...
- 在 React Native 中使用 Redux 架构
前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...
- Android怎么使用字体图标 自定义FontTextView字体图标控件-- 使用方法
首先我想说明一下字体图标的好处,最大的好处就是自适应了,而且是使用TextView 不用去切图,是矢量图 灵活调用 第一步我要说明一下一般字体图标的来源,我这里使用的是 --阿里巴巴矢量图标库 -网 ...
- [转] 在React Native中使用ART
http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...
- React Native实现一个自定义模块
概述 在 前期介绍React Native 项目结构的时候,我们讲解过React的项目组成,其中说过 node_modules 文件夹,这是一个存放 node 模块的地方.我们知道React是用npm ...
- react native中使用echarts
开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...
- React Native 中的component 的生命周期
React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps ob ...
- React Native 中 component 生命周期
React Native 中 component 生命周期 转自 csdn 子墨博客 http://blog.csdn.net/ElinaVampire/article/details/518136 ...
- React Native 中 CSS 的使用
首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...
随机推荐
- Exception in thread "main" java.lang.IllegalArgumentException: System memory 202768384 must be at least 4.718592E8. Please use a larger heap size.
Spark-submit 提交任务时候报错 Exception in thread "main" java.lang.IllegalArgumentException: Syste ...
- ora-04021 无法锁表的解决办法
案例场景: 备库上有一张分区表,在做数据导入出了点问题,需要truncate掉重新导入,在执行truncate table时发生了04021错误. 错误分析: ora-04021的解释是等待锁定对象时 ...
- D. Mike and Feet---cf548D(最值)
题目链接:http://codeforces.com/problemset/problem/548/D 给你n个数,对于(1,n)长度,让你找到线段的最小值的最大值是多少 #include<io ...
- Period II---fzu1901(Next数组)
题目链接:http://acm.fzu.edu.cn/problem.php?pid=1901 给你一个字符串 s 求出所有满足s[i] == s[i+p] ( 0 < i+p < len ...
- spring MVC学习(三)
1. @RequestMapping: 在请求的路径中传递参数:参数作为路径的一部分,可以在路径中直接使用 {paramName}来表示,另一种就是更加传统的表示方式?paramName=paramV ...
- 在虚拟机中还原GHO镜像系统
前置知识 本文精简干练,全是干货.首先要知道,一个原版的Windows系统下载下来就是一个iso格式的文件,也被称为一个镜像.另外还有一种镜像是使用ghost软件制作的,格式为gho的镜像,而ghos ...
- Jmeter+jenkins如何快速搭建接口和性能测试持续集成解决方案-[基于windows篇]
最近在用Jmeter本来想写一个详细的使用教程,突然看到有前辈已经写好了不错的教程,特此"借花献佛"整理出来分享给大家! Jenkins + Jmeter 构建接口.性能测试持续集 ...
- oralce 查看执行计划
SQL的执行计划实际代表了目标SQL在Oracle数据库内部的具体执行步骤,作为调优,只有知道了优化器选择的执行计划是否为当前情形下最优的执行计划,才能够知道下一步往什么方向. 执行计划的定义:执行目 ...
- CCoolBar 的替代方案 CDockablePane。
(阅读受众需有一定MFC知识储备.) (技术支持:http://www.cnblogs.com/shuhaoc/archive/2011/06/26/cdockableform.html) 在以往很多 ...
- Python:6种标准数据类型
原文地址https://www.cnblogs.com/qin1991/p/5910145.html #!/usr/bin/python3 #python的基本语法和数据类型 #python3中 一行 ...