RN（react native）入坑指南-05,使用图标字体Fo

先决条件

• rn 0.23
• npm 3.7.3
• node 5.9.1
• system winX
• python 2.7.x

前言

开发过程中各式各样的图标自然少不了,如果能使用fontawesome等图标字体,自然可以带来极大的方便,然而在rn中并无法直接引用,还好已经有人做好了相关组件,react-native-vector-icons便是其中的佼佼者.
　　如果你对此组件感兴趣可以去github页面star此项目
　　https://github.com/oblador/react-native-vector-icons

安装

官方README如何使用已经写得很详细,此处需要指出的是几个注意点.
　　由于安装时依赖node-gyp,而node-gyp在win下又会有一堆依赖这里以winX为例说一下winX下需要安装的依赖

1.python环境:截止博客发表时仅支持到2.7.X版本,如果是下载的zip包需要将python路径添加到环境变量中

2.vs c++:为了方便 我直接安装了Microsoft Visual Studio Express
npm install react-native-vector-icons --save

3.rnpm:npm install rnpm -g

使用

确保以上三点没问题后,可以通过如下命令安装本组件

    npm install react-native-vector-icons --save

由于我是开发android App,所以依据官方文档继续执行

    rnpm link

在所需使用图标的地方,这里采用的是es6的写法,es5的写法也是可以的

    import Icon from 'react-native-vector-icons/FontAwesome';

使用组件

    <Icon name="qq" size={30} color="#52C0FE"/>

备注

参数说明

|参数|类型|默认值|说明|
|--------------------|
|name|String|无|图标名称,这里需要注意的是 如果你使用font-awesome的图标,例如qq仅写qq即可,无需写fa fa-qq|
|size|数值|12|图标的大小|
|color|rn支持的颜色格式|自动继承|图标的颜色|

支持的图标

• Entypo by Daniel Bruce (411 icons)
• EvilIcons by Alexander Madyankin & Roman Shamin (v1.8.0, 71 icons)
• FontAwesome by Dave Gandy (v4.5, 605 icons)
• Foundation by ZURB, Inc. (v3.0, 283 icons)
• Ionicons by Ben Sperry (v2.0.1, 733 icons)
• MaterialIcons by Google, Inc. (v2.1.1, 893 icons)
• Octicons by Github, Inc. (v3.5.0, 196 icons)
• Zocial by Sam Collins (v1.0, 100 icons)

错误记录
未正确安装python会出现

-gyp ERR! configure error 
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack  

未正确安装vs c++会出现

未能加载Visual C++ 组件VCBuild.exe ”，要求安装.NET FramMS Build 、.NET Framework 2.0 SDK 、 Microsoft Visual Studio 2005。