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的更多相关文章

  1. 教你轻松在React Native中使用自定义iconfont

    在react-native项目中我们一般使用到 react-native-vector-icons(这里不介绍如何使用react-native-vector-icons按照官方文档即可)但是当reac ...

  2. 在 React Native 中使用 Redux 架构

    前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...

  3. Android怎么使用字体图标 自定义FontTextView字体图标控件-- 使用方法

    首先我想说明一下字体图标的好处,最大的好处就是自适应了,而且是使用TextView 不用去切图,是矢量图 灵活调用 第一步我要说明一下一般字体图标的来源,我这里使用的是  --阿里巴巴矢量图标库 -网 ...

  4. [转] 在React Native中使用ART

    http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...

  5. React Native实现一个自定义模块

    概述 在 前期介绍React Native 项目结构的时候,我们讲解过React的项目组成,其中说过 node_modules 文件夹,这是一个存放 node 模块的地方.我们知道React是用npm ...

  6. react native中使用echarts

    开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...

  7. React Native 中的component 的生命周期

    React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps ob ...

  8. React Native 中 component 生命周期

    React Native 中 component 生命周期 转自 csdn 子墨博客  http://blog.csdn.net/ElinaVampire/article/details/518136 ...

  9. React Native 中 CSS 的使用

    首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...

随机推荐

  1. powerdesigner 导入SQL脚本生成模型

  2. nested exception is java.lang.IllegalStateException: Context namespace element 'annotation-config' a

    公司还用的是spring低版本,今天用jre 8测试了一下,发现错误: Unexpected exception parsing XML document from class path resour ...

  3. 如何让ios启动画面停留更长时间

    几种方法: 方法1:在AppDelegate.m里写上 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithO ...

  4. PXE,ipmi,bare metal

    IPMI(Intelligent Platform Management Interface)是一个智能平台管理接口. 用户可以利用IPMI 监视服务器等设备的物理特征,如各部件的温度.电压.风扇工作 ...

  5. 使用渐进式 JPEG 来提升用户体验

    原文出处: 标点符   今天才认识到原来JPEG文件有两种保存方式,分别是Baseline JPEG(标准型)和Progressive JPEG(渐进式).两种格式有相同尺寸以及图像数据,扩展名也是相 ...

  6. 【python】常用函数

    使用list生成dict(可指定单条长度和数据类型,splen为4即为list中每4行组成dict中一条) def list2dict(srclist,splen,datatype):# dataty ...

  7. 内核通信之Netlink源码分析-基础架构

    2017-07-04 netlink是一种基于网络的通信机制,一般用于内核内部或者内核与用户层之间的通信.其有一个明显的特点就是异步性,通信的双方不要求同时在线,也就不用阻塞等待.NetLink按照数 ...

  8. Linux ssh服务

    关于ssh服务不多说就提几句,1,机房的服务器一般都是通过远程连接登录的,远程登录就必然少不了ssh客户端.2,虚拟机每次都要点击进去,每次退出来也需要按Ctrl+Alt+Enter,也比较麻烦,有时 ...

  9. java 多线程 day12 读写锁

    import java.util.Random;import java.util.concurrent.locks.ReadWriteLock;import java.util.concurrent. ...

  10. Spark SQL中UDF和UDAF

    转载自:https://blog.csdn.net/u012297062/article/details/52227909 UDF: User Defined Function,用户自定义的函数,函数 ...