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>

原文地址:https://www.cnblogs.com/fancing/p/9581727.html

时间: 2024-10-12 14:02:48

react-native中使用自定义的字体图标iconfont的相关文章

在mui中引入自定义的字体图标

字体图标可以到阿里巴巴矢量图上下载. 将下载好的iconfont.ttf放进mui/dist/fonts里面.在mui.css中加入以下代码. @font-face { font-family: Muiicons; font-weight: normal; font-style: normal; src: url('../fonts/icon.ttf') format('truetype'); } <!-- 从阿里巴巴矢量图上选好图标下载下来后,会包括一下代码,引入后,就能使用了 --> .i

在 React Native 中使用 Redux 架构

前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也只有一个 Store,而且只用一个 state 树来管理组件的状态.随着应用逐渐变得复杂,React 将组件看成状态机的优势仿佛变成了自身的绊脚石.因为要管理的状态将会越来越多,直到你搞不清楚某个状态在不知道什么时候,由于什么原因,发生了什么变化.Redux 试图让状态的变化变得可预测.Redux

React Native 中 component 生命周期

React Native 中 component 生命周期 转自 csdn 子墨博客  http://blog.csdn.net/ElinaVampire/article/details/51813677 (非原创) React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps object getDefaultProps() 执行过一次后,被创建的类会有缓存,映

[转] 在React Native中使用ART

http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下React Native ART 现在手上闲下来了和大家分享一下React Native中的ART使用心得 React Native ART 究竟是什么? 所谓ART,是一个在React中绘制矢量图形的JS类库.这个类库抽象了一系统的通用接口,统一了SVG,canvas,VML这类矢量图形在 React中

Facebook React Native 中文教程一:介绍

React Native 中文版 Facebook 在 [React.js Conf 2015](http://conf.reactjs.com/) 大会上推出了基于 JavaScript 的开源框架 [React Native](http://facebook.github.io/react-native/),本中文教程翻译自 [React Native 官方文档](http://facebook.github.io/react-native/docs/getting-started.html

React Native中的网络请求

React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810652 /** * Sample React Native App * https://github.com/facebook/react-native * 周少停 2016-09-28 * fetch请求数据 header 参数 response转json 请求方式 */ import React

react native中如何往服务器上传网络图片

1 let common_url = 'http://192.168.1.1:8080/'; //服务器地址 2 let token = ''; //用户登陆后返回的token 3 /** 4 * 使用fetch实现图片上传 5 * @param {string} url 接口地址 6 * @param {JSON} params body的请求参数 7 * @return 返回Promise 8 */ 9 function uploadImage(url,params){ 10 return

react native中Unable to load script from assets &#39;index.android.bundle&#39;解决方案

刚刚朋友问我,说是创建好一个项目,运行后报错:Unable to load script from assets 'index.android.bundle',以前好好的没出现这种现象,于是我找到一个解决方案,分享一下. 解决这个问题的方案是: 进入你该项目的根目录下的 android目录下的app目录下的src文件下的mian文件,(可能说的有点绕),在main件夹下,创建一个assets文件,这个文件是rn的资源文件夹! 之后用dos进入你的项目根目录,执行一下命令: react-nativ

react native中一次错误排查 Error:Error: Duplicate resources

最近一直在使用react native中,遇到了很多的坑,同时也学习到了一些移动端的开发经验. 今天在做一个打包的测试时,遇到了一个问题,打包过程中报错“Error:Error: Duplicate resources”,什么意思呢,就是打包资源有重复,后来查看了一下,发现打包到android/app/src目录下的静态文件重名了. 重现步骤: 1:通过vscode打开项目,运行打包命令 react-native ram-bundle --entry-file index.js --platfo