react-native-vector-icons的集成心得

不知道何时开始， iconfont 成为了 App 开发的利器，不仅因为它是矢量图标，可以轻松解决图标适配和颜色问题，而且它是以字体文件的形式存在项目中，比起常规图片更能节省 App 的体积。

而 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

Android平台上的配置

1.自动配置

react-native link react-native-vector-icons
// 或者
npm install -g rnpm
rnpm link react-native-vector-icons

这个脚本命令可以帮你自动配置好，如果是运行成功的情况下，可惜往往都是失败的。如果这步成功了，而且能够正常运行，下面这些就可以忽略了。

2.手动配置

添加字体文件（这一步千万不能忘记，不然就算运行成功你也看不到图标）

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

这里写图片描述

配置 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')

配置主 App 的 build.gradle

dependencies {
   compile fileTree(dir: "libs", include: ["*.jar"])
   compile project(':react-native-vector-icons') //新添加的
   compile "com.android.support:appcompat-v7:23.0.1"
   compile "com.facebook.react:react-native:+"  // From node_modules
}

修改主 App 的 MainApplication.java 文件

@Override
protected List<ReactPackage> getPackages() {
 return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        //新添加的
        new VectorIconsPackage()
        );
}

运行报错的解决方法

运行时可能会遇到下面这个报错:
```
error: bundling failed: Error: While resolving module `react-native-vector-icons/MaterialIcons`, the Haste package `react-native-vector-icons` was found. However the module `MaterialIcons` could not be found within the package. Indeed, none of these files exist:
```
这个是系统版本引发的问题，因为 React Native 系统配置的文件和 react-native-vector-icons 里面的文件重复了，解决方法就是删除重复的文件，到 /node_modules/react-native/local-cli/core/_fixtures_/files/package.json 里面删除了 package.json 即可，删除之前记得备份一下文件。

到这里配置就全部完成，接下来就可以在 React Native 项目中使用 iconfont 了。

简单的使用

要使用 ttf 里面的 iconfont ，首先要先知道里面有什么图标，到 node_modules\react-native-vector-icons\glyphmaps 里面可以看到很多 json 文件：

这里写图片描述

打开其中一个来看，全是下面这种结构：

这里写图片描述

不难看出，这些就是图标的字符串对应表，下面我们就在代码里面使用其中一个试试：

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Icon name="ios-settings" size={15} color="red" />
        <Icon name="ios-settings" size={25} color="yellow" />
        <Icon name="ios-settings" size={35} color="black" />
      </View>
    );
  }
}

运行效果如下:

这里写图片描述

可以看到，同一个形状的图标，可以轻易修改为不同的尺寸和颜色并且不失真。

iOS 平台上面的配置

暂时没有苹果电脑，这里就无法展示了，具体请参考 Github 的配置，不过看文档应该比 Android 简单的多。

使用自定义的 iconfont

前面都只是使用项目自带的 iconfont ，如果要使用其他人或者自己制作的 iconfont 应该怎么办呢？比如使用阿里巴巴矢量图标库上面的 iconfont 呢？

这里写图片描述

将需要的图标添加入库，然后下载代码即可：

这里写图片描述

点击下载至本地并解压缩，里面包含所有的字体文件。找到 iconfont.ttf，这是需要的文件。

这里写图片描述

要使用刚才我们下载的图标，就需要知道在 iconfont.ttf 里面的图标字符码，虽然我们可以直接在阿里巴巴矢量图标库看到具体的字符码：

这里写图片描述

这里需要忽略前面的 &#x ，主要的字符代码就是 e6a0 ;将它转为十进制的 59040 就是我们需要的 json 文件中的字符串映射。

这里数量还算少了，如果有上百个，我们一个一个来手动换算岂不是累死？这里推荐一个 Python 的工具库。

由于 React Native 的开发环境就要求安装 Python ，这里就不说怎么安装了，只需要配置好 Python 的环境变量：

这里写图片描述

通过命令行安装 fonttools

pip install fonttools

然后在 Github 上面克隆 react-native-iconfont-mapper 到本地并将刚才的 .ttf 文件放在项目根目录中即可：

这里写图片描述

在命令行中执行：

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

这样子就会生成一个 iconfont.js 文件，里面我们需要的图标映射的字符串：

var map = {"favorite":"59040","cart":"59032","back":"59031","x":"120","close":"59034","delete":"59037","edit":"59038",};
;module.exports = (name)=>String.fromCharCode(map[name]);
;module.exports.map = map;

然后我们就可以模仿着源码来使用了，通过 import Icon from "react-native-vector-icons/Ionicons" 进入源码中：

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

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

可以看到核心代码就前面 3 行，那就简单了，做点简单的修改即可：

import {createIconSet} from "react-native-vector-icons"

const glyphMap = {
    favorite: 59040,
    cart: 59032,
    back: 59031,
    x: 120,
    close: 59034,
    delete: 59037,
    edit: 59038,
};

const myIcons = createIconSet(glyphMap, 'iconfont', 'iconfont.ttf');

export default myIcons;

回到一开始运行的 App.js ，导入这个新的 iconfont 文件：

import MyIcons from "./MyIcons";

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <MyIcons name="favorite" size={15} color="red" />
        <MyIcons name="cart" size={25} color="yellow" />
        <MyIcons name="x" size={35} color="black" />
        <MyIcons name="edit" size={45} color="gray" />
      </View>
    );
  }
}

不要以为已经完事了，还差最后一步呢。就是把 iconfont.ttf 放在 \android\app\src\main\assets\fonts

里面并重新安装 APK，才可以看到下面的结果：

这里写图片描述