在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. 135 Candy 分配糖果

    There are N children standing in a line. Each child is assigned a rating value.You are giving candie ...

  2. PowerShell~语法与运算符

    基本语法 变量:$开头 $a = "Hello" 条件语句:if else ) { Write-Host "偶数" } else{ Write-Host &qu ...

  3. 单页Html及Android App供小孩学习常用汉字

    为了检验及帮助小孩学习常用汉字,简单开发本网页应用: 常用汉字是按使用频率排序的,来源于网上: 该简单应用 有Android APP下载 “学习常用汉字_20150910.apk” 单页Html 示例 ...

  4. Andriod 简介

    Andriod系统采用分层架构,分为4层: 应用程序层(Applications) 包含所有安装在手机上的应用程序(包括系统自带的程序) 应用程序框架层(Application Framework) ...

  5. hihocoder1718 最长一次上升子序列

    思路: 对于每个i,分别求1~i和i+1~N两部分的最长下降子序列“拼”起来,最终取最大长度即可.学习了如何使用BIT把LIS问题O(N2)算法优化为O(Nlog(N))的算法. https://ww ...

  6. 让WPS10显示为offic97效果

    让WPS10显示为offic97效果2019/1/26 22:02 OS:win7 64位使用的WPS_10.1.0.5603_setup.1460689247.exe 衣不如旧,人不如新.最开始接触 ...

  7. Android Activity生命周期的几个问题

      每一个Android开发者都应该知道,android系统有四个重要的基本组件,即Activity(活动).Service(服务).Broadcast Receive(广播接收器)和Content ...

  8. java实现汉诺塔算法

    package com.ywx.count; import java.util.Scanner; /** * @author Vashon * date:20150410 * * 题目:汉诺塔算法(本 ...

  9. Java练习题01

    问题: 利用二维非矩阵数组输出下面的数字 0 1 2 2 3 4 3 4 5 6 代码: public class Page98{     public static void main(String ...

  10. 初用emmet

    下载emmet的pspad插件emmet.js.复制到pspad目录下的 script\JScript 文件夹. 输入 ul#nav>li.item$*4>{Item $} 但是没反应. ...