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中的代码: / ...
随机推荐
- powerdesigner 导入SQL脚本生成模型
- nested exception is java.lang.IllegalStateException: Context namespace element 'annotation-config' a
公司还用的是spring低版本,今天用jre 8测试了一下,发现错误: Unexpected exception parsing XML document from class path resour ...
- 如何让ios启动画面停留更长时间
几种方法: 方法1:在AppDelegate.m里写上 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithO ...
- PXE,ipmi,bare metal
IPMI(Intelligent Platform Management Interface)是一个智能平台管理接口. 用户可以利用IPMI 监视服务器等设备的物理特征,如各部件的温度.电压.风扇工作 ...
- 使用渐进式 JPEG 来提升用户体验
原文出处: 标点符 今天才认识到原来JPEG文件有两种保存方式,分别是Baseline JPEG(标准型)和Progressive JPEG(渐进式).两种格式有相同尺寸以及图像数据,扩展名也是相 ...
- 【python】常用函数
使用list生成dict(可指定单条长度和数据类型,splen为4即为list中每4行组成dict中一条) def list2dict(srclist,splen,datatype):# dataty ...
- 内核通信之Netlink源码分析-基础架构
2017-07-04 netlink是一种基于网络的通信机制,一般用于内核内部或者内核与用户层之间的通信.其有一个明显的特点就是异步性,通信的双方不要求同时在线,也就不用阻塞等待.NetLink按照数 ...
- Linux ssh服务
关于ssh服务不多说就提几句,1,机房的服务器一般都是通过远程连接登录的,远程登录就必然少不了ssh客户端.2,虚拟机每次都要点击进去,每次退出来也需要按Ctrl+Alt+Enter,也比较麻烦,有时 ...
- java 多线程 day12 读写锁
import java.util.Random;import java.util.concurrent.locks.ReadWriteLock;import java.util.concurrent. ...
- Spark SQL中UDF和UDAF
转载自:https://blog.csdn.net/u012297062/article/details/52227909 UDF: User Defined Function,用户自定义的函数,函数 ...