在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. profile和bashrc

    转自某不知名网友 /etc/profile,/etc/bashrc 是系统全局环境变量设定~/.profile,~/.bashrc用户家目录下的私有环境变量设定当登入系统时候获得一个shell进程时, ...

  2. Include,Forward,sendRedirct的区别(转)

    三者在servlet中的最大区别是: Include和Forward:将当前请求转到另外一个JSP或者servlet处理. sendRedirct:将当前请求返回到浏览器,带上要redirect的UR ...

  3. forward和sendRedirect的区别

    部分内容转自:http://blog.csdn.net/zhouysh/article/details/380364和http://blog.csdn.net/frank_jay/article/de ...

  4. 1051 - Good or Bad DFS 记忆化搜索

    http://lightoj.com/volume_showproblem.php?problem=1051 对于每个位置,设dfs(cur, one, two)表示前i个字母,拥有辅音字母one个, ...

  5. Spark网络通信分析

    之前分析过spark RPC的基本流程(spark RPC详解),其实无论是RPC还是Spark内部的数据(Block)传输,都依赖更底层的网络通信,本文将对spark的网络通信做一下剖析. 1,概要 ...

  6. qconbeijing2018

    https://2018.qconbeijing.com/schedule 会议 · 第一天 (2018/04/20 周五) 时间 日程 上午 主题演讲 大数据下的软件质量建设实践 黄闻欣 出品 人工 ...

  7. C#基础学习4

    流程控制!

  8. ios 微信环境 axios请求 status 0

    做了一个支付页面,调用post请求但是请求status 0,出现这个的原因居然是https的网页请求http的数据. 但是这个再ios里面不会报错,安卓正常. 记录一下客户端的这个特征!

  9. SQL异常为"当IDENTITY_INSERT设置为OFF时" 的解决

    误删数据库时,可以利用insert插入删除的数据,但是有时表可能有自增字段如id.这是插入数据如果包含自增字段就会出现错误,提示"IDENTITY_INSERT设置为OFF,插入失败&quo ...

  10. js中json处理总结之JSON.parse

    踩过的坑都将成为路上的风景.队友在cookie中已存以下值: address_info {"address_name":"人民大会堂","...lng ...