react-native-vector-icons 的集成
不知道什么时候开始， iconfont 成为了 App 开发的利器，不仅因为它是矢量图标，可以轻松解决图标适配和颜色问题，而且它是以字体文件的形式存在项目中，比起常规图片更能节省 App 的体积，而 react-native-vector-icons 是在 GitHub 上最火的 React Native 的 iconfont 图标库，也是这博客的主角。
react-native-vector-icons 安装
先给项目添加该库 ( 跳转GitHub查看react-native-vector-icons )
npm install --save react-native-vector-icons
// 或者
npm install -g yarn
yarn add react-native-vector-iconsAndroid 平台上的配置
自动配置
// 自动配置
react-native link react-native-vector-icons
// 或者
npm install -g rnpm
rnpm link react-native-vector-icons这个脚本命令可以帮你自动配置好，如果是运行成功的情况下，可惜往往都是失败的。如果这步成功了，而且能够正常运行，下面这些就可以忽略了。
手动配置
添加字体文件（这一步千万不能忘记，不然就算运行成功你也看不到图标）
到项目中的 node_modules/react-native-vector-icons/Fonts，里面有很多已经内置的图标库字体文件，依照自己的需求，复制需要的字体文件到 android/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')
// From node_modules
implementation "com.android.support:appcompat-v7:23.0.1"
implementation "com.facebook.react:react-native:+"
}修改主 App 的 MainApplication.java 文件
@Override
protected List getPackages() {
return Arrays.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 平台上面的配置
iOS还没弄，这里就先不讲了，具体请参考 Github 的配置…
使用自定义的 iconfont
前面都只是使用项目自带的 iconfont ，如果要使用其他人或者自己制作的 iconfont 应该怎么办呢？比如使用阿里巴巴矢量图标库上面的 iconfont 呢？
将需要的图标添加入库，然后下载代码即可：
点击下载至本地并解压缩，里面包含所有的字体文件。找到 iconfont.ttf，这是需要的文件。
要使用刚才我们下载的图标，就需要知道在 iconfont.ttf 里面的图标字符码，虽然我们可以直接在阿里巴巴矢量图标库看到具体的字符码：
这里需要忽略前面的 &#x ，主要的字符代码就是 e6a0 ;将它转为十进制的 59040 就是我们需要的 json 文件中的字符串映射。
这里数量还算少了，如果有上百个，我们一个一个来手动换算岂不是累死？这里有一个 Python 的工具库。
由于 React Native 的开发环境就要求安装 Python ，这里就不说怎么安装了，只需要配置好 Python 的环境变量：
通过命令行安装 fonttools ( 跳转GitHub查看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，才可以看到的结果哦！
Mac 安装 / 卸载 pip 教程
待安装系统环境
系统：macOS 10.13.2
依赖：已经安装了Python 2.7.10
查看本机 Python 版本的方法
在命令行输入 python --version
检测是否安装 pip 方法
在命令行输入 pip
如果出现 -bash: /usr/local/bin/pip: No such file or directory 的提示说明你并没安装pip
安装
安装好Python环境的本地都有 easy_install 执行程序，我们这里主要使用 easy_install 来安装。
在命令行输入 sudo easy_install pip
这里一定要使用sudo 方式安装，不然或保存，因为会没权限。如果让你输入密码后，跑一堆安装进入啥的，说明已经在安装了。只要最后是 Finished 结尾就说明安装完成了。
此时再通过 pip --version 查看 pip版本就会有版本信息了。
如果安装过程中有啥问题欢迎留言。
卸载 pip
如果你已经安装后pip卸载pip 只需要一个命令 sudo pip uninstall pip 然后回提示你是否确认卸载，你输入y就可以了。
最后出现 Successfully uninstalled 的字样就说明卸载完成了，此时再使用 pip --version 查看 pip版本就会提示 找不到 pip 了。
