在react-native项目中我们一般使用到 react-native-vector-icons(这里不介绍如何使用react-native-vector-icons按照官方文档即可)但是当react-native-vector-icons里面的默认图标并不能满足我们的日常开发的时候怎么办呢?

那就是只能使用自定义图标来了,这里我们以iconfont为例,(其他图标库引入方式一模一样)

一、在iconfont上选择好你需要的图标,下载并解压如下:

二、将iconfont.tff文件拷贝到android/app/src/main/assets/fonts文件下

三、在你的根目录下新建js/common/MyIcon.js和iconfont.json

编辑Myicon.js

import {createIconSet} from 'react-native-vector-icons';
import glyphMap from './iconfont.json'; const iconSet = createIconSet(glyphMap, 'MyIcon', 'iconfont.ttf'); export default iconSet;

编辑iconfont.json

{
"qiuchang": 59002
}

这里作如下说明,iconfont.json中对应图标名字,和十进制码,我们选择的图标有个Unicode编码,他是十六进制的,而我们要将其转换为十进制,配置在我们的iconfont.json中

四、使用

import MyIcon from "../../common/CustomizeIcon";

.....
<MyIcon name={'qiuchang'} size={50} style={{
color: '#f33'
}}></MyIcon>
........

五,加入你的产品的图标全部都是原创的,那么你就需要你们ui给你制作对应.ttf文件,步骤和上面一直,还有就是,可以使用脚本自动对应json的映射关系........

教你轻松在React Native中使用自定义iconfont的更多相关文章

  1. 教你轻松在React Native中集成统计(umeng)的功能(最新版)

    关于在react-native中快速集成umeng统计,网上的文章或者教程基本来自----贾鹏辉老师的文章http://www.devio.org/2017/09/03/React-Native-In ...

  2. 在 React Native 中使用 Redux 架构

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

  3. [RN] React Native 中使用 stickyHeaderIndices 实现 ScrollView 的吸顶效果

    React Native中,ScrollView组件可以使用 stickyHeaderIndices 轻松实现 sticky 效果. 例如下面代码中: <ScrollView showsVert ...

  4. React Native 中 CSS 的使用

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

  5. react native中的欢迎页(解决首加载白屏)

    参照网页: http://blog.csdn.net/fengyuzhengfan/article/details/52712829 首先是在原生中写一些方法,然后通过react native中js去 ...

  6. React Native中的网络请求fetch和简单封装

    React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...

  7. [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势

    http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...

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

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

  9. react native中使用echarts

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

随机推荐

  1. iOS [CIContext initWithOptions:]: unrecognized selector sent to instance 模拟器 iOS 8.4

    在模拟器(iPhone 4s,iOS 8.4)中运行应用时, 应用crash在了使用CIContext(options:nil) 这个API的一个纯Swift第三方库. StackOverFlow的解 ...

  2. Python基础知识(2)

    1:if比较运算符.and.or >=:大于或者等于 <=:小于或者等于 ==:等于 !=:不等于  (<>:也是不等于,在Python2中可用.Python3中无法使用) a ...

  3. bzoj2154||洛谷P1829 Crash的数字表格&&JZPTAB && bzoj3309 DZY Loves Math

    bzoj2154||洛谷P1829 https://www.lydsy.com/JudgeOnline/problem.php?id=2154 https://www.luogu.org/proble ...

  4. Eclipse安装svn插件的几种方式 -- 转

    1.在线安装: (1).点击 Help --> Install New Software... (2).在弹出的窗口中点击add按钮,输入Name(任意)和Location(插件的URL),点击 ...

  5. Learn More Study Less `my notes`

    整体性学习概念: 广泛扎实的基础知识 抽象知识成生活中的模型,便于记忆 融会贯通,创造新的东西 整体性学习组成 获取:积极阅读:标记并结合其他的知识点 主要观点 怎么记住:联系和比喻其他的知识 拓展和 ...

  6. spring boot使用jpa查询mysql数据库的视图时不报错,但查询结果数据总是重复第一条

    问题描述: 在数据库里查询到的结果是正常显示的 在程序中返回的结果: 解决方法: 添加行号作为主键: 解决! 我明明是前端啊前端,为啥在搞后台....,总感觉我要在向全栈进发,希望自己有朝一日真的能成 ...

  7. 《Head First HTML与CSS》的CSS属性

    关于继承的结论. 1.元素选择器的作用强于继承的作用:用户定义强于浏览器默认(详见(3)<Head First HTML与CSS>学习笔记---CSS入门的2) 2.基于类的选择器> ...

  8. jdk1.8新日期时间类(DateTime、LocalDateTime)demo代码

    //获取当前时间 LocalDateTime d0 = LocalDateTime.now(); System.out.println(DataConvertUtil.localDateTimeToS ...

  9. 类似QQ在线离线好友界面

    把头像设置成圆形的代码如下: package com.example.lesson6_11_id19; import android.content.Context; import android.c ...

  10. Cognos添加维度

    1.打开后台cognos中的报表,创建查询主题 填写该维度的名称 以时间维度为例 从左边添加该维度的单位,修改名称(在Cognos前台显示),如果有逻辑在源里面修改下函数 以此类推.