reactnative中如何使用自定义的iconfont图标(代码片段)

关键词：

  在App包的构成中图片资源是比较占大小的，所以我们可以利用Iconfont来替代原来的png或者jpg单色图标，iconfont的优点是占Size小、支持任意大小不失真、支持任意颜色设置、平台化管理icon等等。

Demo及脚本地址：RNIconfont【欢迎issue/star/follow~】

本文主要分为三部分：

• react-native-vector-icons库的集成与使用
• 如何使用任意自定义的iconfont
• 编写脚本来快捷生成iconfont映射文件

 

1.react-native-vector-icons库的集成与使用

react-native-vector-icons是ReactNative开发中十分好用的一个用来展示iconfont图标的库。

集成只要两步：
1.引入依赖

Run: npm install --save react-native-vector-icons

2.链接原生库

Run: react-native link react-native-vector-icons

如果第二步链接失败或者运行错误，可以自己手动链接，具体可以参考react-native-vector-icons说的比较清楚了。

集成完毕后，可以看到这个库默认引入了几个ttf文件（android项目在assets/fonts下）：

也就是说这些ttf文件中所有icon都可以直接使用，下面就说一下如何使用。

使用非常简单，如下：

import Icon from "react-native-vector-icons/Ionicons";

<Icon name=‘md-pricetag‘ size=16 color=‘#cccccc‘></Icon>

2.如何使用任意自定义的iconfont

 

 上面介绍了react-native-vector-icons库的使用，但是目前为止你能使用的iconfont只有上面说的默认引入的那些ttf文件中的icon,因为上面所使用的< Icon>< /Icon>只支持默认引入的那些icon。

    这样显然不能满足我们的要求，我们想要使用自己的iconfont,那么我们该如何做呢，这里以从阿里iconfont平台上选择自己想要的icon为例做介绍。

一、从阿里iconfont平台上挑选自己想要的icon，打包下载到本地并解压，如下：

二、将iconfont.ttf文件copy到android项目的assets/fonts目录下

三、自定义图标库
CXIcon.js

import createIconSet from ‘react-native-vector-icons/lib/create-icon-set‘;
import glyphMap from ‘./iconfont.json‘;

const iconSet = createIconSet(glyphMap, ‘CXIcon‘, ‘iconfont.ttf‘);

export default iconSet;

export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;

看到import glyphMap from ‘./iconfont.json’了吗，所以这里我们还需要一个iconfont.json，也就是映射map。

iconfont.json:

  "biscuit": 58983,
  "pizza": 59024,
  "dangao": 59080

这是我们在阿里iconfont上下载的三个icon对应的Unicode码。

ok，到这里我们就可以使用来展示我们自定义下载的几个icon了，使用如下：

import React, Component from ‘react‘;
import 
    Text,
    View
 from ‘react-native‘;
import CXIcon from "./components/cxicon/CXIcon";

type Props = ;
export default class App extends Component<Props> 
    render() 
        return (
            <View style=styles.container>
                <Text>展示来自自定义的ttf文件的icon</Text>
                <CXIcon name=‘biscuit‘ size=50 color=‘#226688‘></CXIcon>
            </View>
        );
    

3.编写脚本自动生成上面的iconfont.json映射文件
    看完第二步 其实你就已经可以自由的使用自己选择的icon图标了，但是你会发现一个问题，上面我们需要一个iconfont.json映射文件，这个映射文件是我们手写的，如果只有3个图标那我们可以手写，那如果是300个图标，如果还手写，那就不是程序员的风格了，我们的风格是什么？没错，是懒惰，不可能做重复的工作的，这辈子都不可能做重复的工作的。

    回到上面，我们从阿里iconfont平台下载到的zip压缩包解压缩后里面有一个iconfont.svg文件，我们就根据这个文件来解析生成我们想要的iconfont.json映射文件，撸起袖子，写个shell脚本。

iconfont_mapper.sh:
 

#!/bin/sh

if [ $# != 1 ] ; then

    echo "usage: $0 iconfont.svg(your svg file name)  "
    exit
fi

#OutputFile path,you can customize your path
OutputFileName=`echo iconfont.json`

mapper=` awk ‘ if($0 ~ /glyph-name/) print $0;  if($0 ~ /unicode/)  print $0"|split|" ‘  $1| tr ‘[:upper:]‘ ‘[:lower:]‘| awk ‘print $0‘  RS=‘=‘| tr "
"&#;" " "| awk  ‘ if ($1!="split"&&$1!="") printf ("""$3"":"); printf ($5","); print "
 " ‘ RS="|split|" | sed "s/-/_/g"`

rm $OutputFileName
echo "" >> $OutputFileName
echo $mapper >> $OutputFileName
echo "" >> $OutputFileName

#usage:
# ./iconfont_mapper.sh svg_file_path

使用：
命令行执行： ./iconfont_mapper.sh iconfont.svg 即可。

注意：如果你的iconfont_mapper.sh脚本和iconfont.svg文件没有放在同一个文件目录下，则iconfont.svg需要拼全路径。

  执行完这个脚本你就会发现在脚本所在的目录下自动生成了我们需要的iconfont.json映射文件。将它放到项目中即可。

如有问题请联系：齐论电商.电商运营怪兽

reactnative组件详解

ReactNative学习记录传送门ReactNative核心思想就是组件化，它基于前端框架React,在我们使用其开发Android和iOS的时候，共用一套组件即一套代码，增加了代码复用性。今天的这篇文章不不分析过多的知识点，主要介绍... 查看详情

React Native：如何聚焦包装在自定义组件中的 TextInput？

】ReactNative：如何聚焦包装在自定义组件中的TextInput？【英文标题】：ReactNative:HowtofocusaTextInputwrappedinacustomcomponent?【发布时间】：2020-09-0515:15:32【问题描述】：在我的ReactNative应用程序中，我有一个包含TextInput的自定义组件。在... 查看详情

如何使用子节点创建自定义 React Native 组件

】如何使用子节点创建自定义ReactNative组件【英文标题】：HowtocreatecustomReactNativecomponentswithchildnodes【发布时间】：2015-11-2219:13:46【问题描述】：我想用纯JavaScript创建一个ReactNative组件，由TouchableOpacity和Text等其他组件组成。我的... 查看详情

reactnative组件详解

ReactNative学习记录传送门ReactNative核心思想就是组件化，它基于前端框架React,在我们使用其开发Android和iOS的时候，共用一套组件即一套代码，增加了代码复用性。今天的这篇文章不不分析过多的知识点，主要介绍... 查看详情

使用 Swift 反应原生自定义 UI 组件：如何在事件中访问 reactTag

...自定义UI组件：如何在事件中访问reactTag【英文标题】：ReactnativecustomUIcomponentwithSwift:howtoaccessreactTaginevent【发布时间】：2015-11-0317:10:26【问题描述】：在Swift中创建自定义UI组件时，如何访问reactTag以触发返回给ReactNative的事件？... 查看详情

如何使用 Jest 测试导入自定义原生模块的 React Native 组件？

】如何使用Jest测试导入自定义原生模块的ReactNative组件？【英文标题】：HowtotestaReactNativecomponentthatimportsacustomnativemodulewithJest?【发布时间】：2017-05-1110:26:27【问题描述】：这是我尝试使用ReactNative0.39和Jest18测试的一个简单组件：... 查看详情

reactnative自定义路由管理(代码片段)

...oid还是iOS，它们都有一个默认的路由路由栈管理类。由于ReactNative官方没有提供路由管理的组件，所以我们需要使用react-navigation插件提供的Stack.Navigator组件来管理路由。Stack.Navigator使用的命名路由，所谓命名路由，指的是路由需... 查看详情

【reactnative】自定义格式的资源文件引入及使用

参考技术A很多时候ReactNative在引入资源文件的时候比如SVG，JSON文件资源的时候，需要把文件放在对应的原生工程里面去（IOS和Android分别放入），这样其实对于资源使用的整理是很麻烦的，其实官网也是有考虑到这个问题的，在R... 查看详情

在 react native 中构建自定义抽屉时，如何在抽屉项目上使用按钮/图标？

】在reactnative中构建自定义抽屉时，如何在抽屉项目上使用按钮/图标？【英文标题】：HowdoIusebuttons/iconsondraweritemswhenbuildingmycustomdrawerinreactnative?【发布时间】：2021-12-3115:34:29【问题描述】：我正在尝试在我的react本机导航抽屉中... 查看详情

reactnative（四）自定义header和footer组件

参考技术A定义组件：1、定义有状态组件：//定义Header类，这个类是Component的子类//render()方法是一个渲染方法，该方法返回一个View模块classHeaderextendsComponent/*实现Header类的render方法，这个方法返回一个View，显示Footer*/render()return(&... 查看详情

如何在 React Native 中创建自定义日历？

】如何在ReactNative中创建自定义日历？【英文标题】：HowtocreatecustomcalendarinReactNative?【发布时间】：2017-12-2808:23:47【问题描述】：我需要在ReactNative中创建自定义日历。我在下面附上了一些截图。第一个是方形日历，第二个是水... 查看详情

如何在 React Native 中创建自定义顶部导航栏

】如何在ReactNative中创建自定义顶部导航栏【英文标题】：HowtocreateacustomtopnavigationbarinReactNative【发布时间】：2021-01-3104:11:00【问题描述】：您好，我正在用ReactNative构建一个应用程序，我想要一个自定义的标签栏。我已经尝试过... 查看详情

reactnative系列

前言本系列是基于ReactNative版本号0.44.3写的。在我们之前的通过props实现组件间传值的时候，大家有没有发现在父组件传递值过去，在子控件获取props的时候没有提示，那么如何能实现让其有提示呢？这篇文章将带领大家去认识一... 查看详情

在 React Native 的 TextInput 中插入自定义表情符号图像

】在ReactNative的TextInput中插入自定义表情符号图像【英文标题】：InsertcustomemojiimageinTextInputinReactNative【发布时间】：2022-01-0215:37:26【问题描述】：我想在我的应用程序中使用自定义表情符号，以便表情符号在不同平台上保持一致... 查看详情

reactnative开发跳坑之native-base自定义样式

参考技术A开发平台的搭建就不赘述了，按照网上的资料和官网的Demo都能把HelloWorld搞出来，在这里我只记录一些，花了较长时间才解决的问题。本篇文章解决的问题是在使用第三方UI插件native-base如何自己定义样式。在使用RN时，... 查看详情

reactnative中利用picker自定义日期组件(只包含年和月)

因为业务需求,定义只包含年月的日期,react-native自带组件不符合,第三方鸡肋,于是自己写一个,安卓和IOS样式不同,自己体验调用方法示例:importPickerDatafrom‘..//Picker‘;<PickerDatavisible=store.visibleRefereeonCancel=()=>store.visibleReferee=false;... 查看详情

如何在自定义模块（Joomla 1.7）中使用自定义组件中的函数？

】如何在自定义模块（Joomla1.7）中使用自定义组件中的函数？【英文标题】：howcanIusefunctionsfromcustomcomponentinacustommodule(Joomla1.7)?【发布时间】：2011-12-2515:46:52【问题描述】：我正在编写一个自定义组件以及Joomla1.7中的一些自定义... 查看详情

reactnative如何在js中引用原生自定义控件（rn变化太快，网上很多教程有坑，这个我研究后可用，特意分享）(代码片段)

直接写一个Demo例子，有相关功底的肯定明白，会对特别的地方进行提醒，本文基于https://blog.csdn.net/lintcgirl/article/details/53489490，但是按此链接文章不可用。 首先是JAVA部分：1importcom.facebook.react.ReactActivity;23publicclassMainActivityext... 查看详情