react-native-vector-icons进阶教程(自定义iconfont使用)

前言

React Native大火大热,其中为了解决图标,易于修改,换颜色,高清等需求,你还是选择切多套png来适配吗?答案当然是否定的!不知从何时起,扁平化图标成为潮流,iconfont也应运而生,最先接触iconfont已是多年前的事了,那时候只知道怎么在web上使用,它带来的便捷性和可扩展性也是大家有目共睹。
最先接触iconfont这一概念还是从一些国外的图标网站得来,譬如flaticon、icomoon,但这些毕竟都是国外的平台,身在大天朝说实话用的有些不习惯,这时候iconfont.cn应运而生,完全针对中国的iconfont平台,在使用上最起码很顺手。好了,说了这么多只想重申一点,iconfont你值得拥有,无论事web,还是app,亦或是我们今天的主角(react-native)。

一、react-native-vector-icons 概述

这个是在GitHub上最火的react-native图标库,使用起来简单高效,其中内置市面上大部分开源的图标库,我们只需要简单的配置,即可马上体验iconfont带来的快感,虽然其官方仓库已经有很清楚的步骤带领我们一步步配置,这里我还是以我自己通俗的理解做下步骤讲解:

二、react-native-vector-icons安装和配置

npm install --save react-native-vector-icons
//或者
npm install -g yarn
yarn add react-native-vector-icons

1、android平台

1.1、自动配置
react-native link react-native-vector-icons
// 或者
npm install -g rnpm
rnpm link react-native-vector-icons

会为你配置好所有,但是这是成功的情况下,你不需要操心任何事,但是往往不能如愿。如果你这步成功了,而且能够正常运行,下面这些你就可以跳过!

1.2、手动配置
1.2.1 复制字体文件(这一步千万不能忘记,不然就算运行成功你也看不到图标)

找到项目node_modules/react-native-vector-icons/Fonts,里面有很多已经内置的图标库字体文件,依照自己的需求,复制你需要的字体文件到 android/app/src/main/assets/fonts,(如果没有这个目录就自行创建)

image.png
1.2.2 配置 android/settings.gradle

在现有的代码基础上添加如下代码:

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
1.2.3 配置android/app/build.gradle

修改如下:

dependencies {
    compile project(':react-native-vector-icons') //添加
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
    compile project(':react-native-navigation')
}
1.2.4 配置 android/app/src/main/java/com/xxxx/MainApplication.java
import com.oblador.vectoricons.VectorIconsPackage;
@Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
      new MainReactPackage()
+   , new VectorIconsPackage()
    );
  }

到这里配置就全部完成,接下来就可以在rn项目中使用iconfont

import Icon from 'react-native-vector-icons/dist/Ionicons';
<Icon name='ios-settings' size={16} color="#fff"/>
image.png

2、ios平台

相对android来说简单很多,可以参照github上面的步骤来!

三、使用自定义iconfont

说了这么多,还只是它自带的图标库的使用,如果我们要使用自己自定义的一些图标呢,譬如iconfont.cn上面的

image.png
1、图标准备

如上图,作为测试,我准备了上述图标。点击下载至本地,里面包含所有的字体文件。找到iconfont.ttf,这是我们重点需要的文件。

image.png

2、react-native-vector-icons结构分析

如下图,找到node_modules/react-native-vector-icons的根目录,可以看到很多js文件,命名都是以图标库的名称命名,随便打开一个Ionicons.js,发现代码很简单

image.png

把这个文件复制一遍,重命名为Iconfont.js,修改为如下:

import createIconSet from './lib/create-icon-set';
import glyphMap from './glyphmaps/Iconfont.json';

const iconSet = createIconSet(glyphMap, 'fontcustom', '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;

从上面的代码我们不难看出,我们还需要个Iconfont.json文件,顺着路径可以找到很多json文件。

image.png

这就是接下来要整理出来的字符对应表。当然你可以手动去整理,一个两个的还可以,如果一个项目几十上百个甚至更多呢,能用工具去解决的事,我们绝不浪费时间,接下来介绍的就是如何利用工具去获取字符表。

2.1 安装python

点击下载pthon安装包https://www.python.org/ftp/python/2.7.14/python-2.7.14.msi
等待安装完成!

2.2 配置python环境变量

在path中添加 python安装目录以及Scripts

image.png
2.3 安装 fonttools
pip install fonttools

具体介绍请参考:github地址

2.4准备react-native-iconfont-mapper

直接打包下载react-native-iconfont-mapper,或者通过git克隆到本地,这个目录自己选个容易记住的,因为以后用的比较多。

image.png

项目比较单一,仅仅一个python文件。

2.5 提取字符表

将前面下载的字体包中的ttf文件拷贝到这里

image.png
python iconfont-mapper.py iconfont.ttf iconfont.js
image.png

不出意外,可以生成一个iconfont.js文件,打开查看便可以看到我们所需要的json字符串

image.png
2.5 新建icon font.json

在node_modules/react-native-vector-icons/glyphmaps中新建Iconfont.json

{
  "home": 58880,
  "setting": 58881,
  "code": 58886,
  "money": 58951,
  "phone": 58952,
  "user": 58890,
  "customer": 58993,
  "message": 59034,
  "add": 59418,
  "password": 58910
}

这里需要注意,刚才生成的字符表json对象后面的值有引号,这里需要删除,由于个数比较少,我还是选择手动删除,如果多的话还是推荐正则来批量删除,但是还不会,希望有知道怎么操作的在下面留言。
到这里,扩展react-native-vector-icons,添加自定义图标就完成了,接下来就可以像上面一样引用iconfont图标了

import Icon from 'react-native-vector-icons/Iconfont'; // 不过引用的时候就要改成Iconfont了,其他的类似

自定义iconfont的另外一种用法

上面那种方法是在react-native-vector-icons的基础上扩展其图标库,但是有时候我们往往不需要去安装这么大的一个库,甚至去引用那么多字体文件,不知道大家是否还记得我们是怎么在web端使用iconfont的

<span class="iconfont icon-home"></span

那能不能在react-native中也这样使用呢?这样更贴合前端人员的思想
追溯到我们提取成功字符表的那一步!

var map = {"home":"58880","setting":"58881","code":"58886","money":"58951","phone":"58952","user":"58890","customer":"58993","x":"120","message":"59034","add":"59418","password":"58910",};
;module.exports = (name)=>String.fromCharCode(map[name]);
;module.exports.map = map;

直接将这个文件拷贝到项目中,可以用如下的方式来直接使用

import icon from "./fontConf";
export default class  IconExample extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={{fontFamily: 'Iconfont',fontSize:30}}>
                    arrow-icon:{icon('arrow')}
                </Text>
                <Text style={{fontFamily: 'Iconfont',fontSize:30, color:"#ff4444"}}>
                    vip-icon:{icon('tag-svip')}
                </Text>
                <Text style={{fontFamily: 'Iconfont',fontSize:30, color:"#ff4444"}}>
                    tag-svip:{icon('tag-svip')}
                </Text>
            </View>
        )
    }
}

重点提示:以上所有操作,都需要将字体文件拷贝到android/app/src/main/assets/fonts

推荐阅读更多精彩内容