最近不忙，想着说敲敲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

4.png

5.png

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

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

6.png

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