react-native-vector-icons使用

最近不忙，想着说敲敲RN吧，如果你身边有android大哥或者ios大姐，你就请人家喝杯咖啡，因为真的属实能帮到你不少呢！我是win系统所以只能敲android的，rn的开发工具要用到安卓虚拟机（或者真机）、androidstudio等，对于原生白痴的我一系列的SDK报错啥的，解决起来还真的是需要时间，不过庆幸的是自己能解决的也都解决了（不能解决的有我们android小弟，哈哈！），其实只要好好跟着文档上面的步骤去安装没有问题的！好了，现在就说下这个Icon图标库的安装吧！

首先是安装：

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

Android平台上的配置(自动配置)
提示：自己亲测，属实不好用，不管报没报错还是手动配置的委托！！！

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

Android平台上的配置(手动配置)

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

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

1.png
2.png

---配置 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 了。

！！！还有一个常见的错误是在运行时，提示不能删除某个文件，具体的错误忘记截图了，总之最后的解决办法是将文件只读属性改变了就好了。

TIM截图20180409100230.png

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

3.png

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

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

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>
    );
  }
}

运行效果如下:

5.png

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

1.png
将需要的图标添加入库，然后下载代码即可：
2.png
点击下载至本地并解压缩，里面包含所有的字体文件。找到 iconfont.ttf，这是需要的文件。
4.png
要使用刚才我们下载的图标，就需要知道在 iconfont.ttf 里面的图标字符码，虽然我们可以直接在阿里巴巴矢量图标库看到具体的字符码：
5.png
这里需要忽略前面的 &#x ，主要的字符代码就是 e6a0 ;将它转为十进制的 59040 就是我们需要的 json 文件中的字符串映射。

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

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

6.png
通过命令行安装 fonttools

pip install fonttools

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

7.png
在命令行中执行：

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，才可以看到下面的结果：

8.png