> [react-native-icons](https://github.com/corymsmith/react-native-icons)
## 下载
在项目的根目录下执行`npm install react-native-icons@latest --save`,下载完成后可以在node_modules目录下看到该插件:
![](https://box.kancloud.cn/2016-01-07_568e13f49b570.jpg)
## 配置
目前只支持iOS,所以只有xcode的配置:
## 导入ReactNativeIcons.xcodeproj
1.项目`Libraries`上右键:
![](https://box.kancloud.cn/2016-01-07_568e13f4c4750.jpg)
添加项目根目录下的`node_modules/react-native-icons/ios/ReactNativeIcons.xcodeproj`
2.引用libReactNativeIcons.a:
单机项目,在右面的面板中选择`Build Phases`下的`Link Binary With Libraries`,点击`+`号添加库:
![](https://box.kancloud.cn/2016-01-07_568e13f502646.jpg)
![](https://box.kancloud.cn/2016-01-07_568e13f52514c.jpg)
3.添加ttf文件:
这个地方要注意,github上直说了引用`node_modules/react-native-icons/ios/ReactNativeIcons/Libraries/FontAwesomeKit`文件夹,但是主要的还是4个ttf文件:
单机项目,在右面的面板中选择`Build Phases`下`Copy Bundle Resources`选择`+`号,在出现的文件选择器中点击`Add Other...`,定位到`node_modules/react-native-icons/ios/ReactNativeIcons/Libraries/FontAwesomeKit`目录下,把所有的ttf文件和otf都勾选上:
![](https://box.kancloud.cn/2016-01-07_568e13f547d1f.jpg)
![](https://box.kancloud.cn/2016-01-07_568e13f568068.jpg)
![](https://box.kancloud.cn/2016-01-07_568e13f5807df.jpg)
## Import
要想使用`react-native-icons`,需要在代码中添加如下语句:
~~~
var {
Icon,
} = require('react-native-icons');
~~~
## 选择图标
| 类别 | 图标数量 | 引用名 |
| --- | --- | --- |
| [FontAwesome 4.4](http://fortawesome.github.io/Font-Awesome/icons/) | 585 | fontawesome |
| [ionicons 2.0.0](http://ionicons.com/) | 733 | ion |
| [Foundation icons](http://zurb.com/playground/foundation-icon-fonts-3) | 283 | foundation |
| [Zocial](http://zocial.smcllns.com/) | 99 | zocial |
| [Material design icons](http://google.github.io/material-design-icons/) | 744 | material |
## 实例
我们在FontAwesome4.4网站上找了一个apple图标:
![](https://box.kancloud.cn/2016-01-07_568e13f5a4a76.jpg)
怎么用呢?看下面代码:
~~~
'use strict';
var React = require('react-native');
var {
Icon,
} = require('react-native-icons');
var {
AppRegistry,
StyleSheet,
View,
} = React;
var TesterHome = React.createClass({
render() {
return ( < Icon name = 'fontawesome|apple'
size = {
150
}
style = {
styles.beer
}
/>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
},
beer: {
width: 150,
height: 150,
}
});
AppRegistry.registerComponent('TesterHome', () => TesterHome);
~~~
核心代码是`fontawesome|apple`就是这么简单.所以的引用都是`库名的引用名|图标的名称`,效果如下:
![](https://box.kancloud.cn/2016-01-07_568e13f5c32bd.jpg)
- 前言
- react-native试玩(1)
- react-native试玩(2)
- (3)-窥探开发者选项
- (4)-新建项目
- (5)-小菊花控件
- (6)-日期选择控件
- (7)-图片控件
- (8)-列表视图
- (9)-地图视图
- (10)-导航栏
- (11)-模态
- (12)-iOS中导航栏
- (13)-选择控件
- (14)-iOS中进度栏
- (15)-滚动视图
- (16)-iOS分段控制控件
- (17)-iOS中的滑动条
- (18)-开关控件
- (19)-分页栏
- (20)-分页栏中的元素
- (21)-文本控件
- (22)-文本输入框
- (23)-触摸高亮
- (24)-触摸模糊
- (25)-触摸无反馈
- (26)-网页视图
- (27)-上拉菜单API
- (28)-弹出框API
- (29)-React Native Playground
- (30)-应用状态API
- (31)-访问相册API
- (32)-推送通知API
- (33)-状态栏API
- (34)-配置Android开发环境
- (35)-react-native-icons插件