> [react-native-icons](https://github.com/corymsmith/react-native-icons)
## 下載
在項目的根目錄下執行`npm install react-native-icons@latest --save`,下載完成后可以在node_modules目錄下看到該插件:

## 配置
目前只支持iOS,所以只有xcode的配置:
## 導入ReactNativeIcons.xcodeproj
1.項目`Libraries`上右鍵:

添加項目根目錄下的`node_modules/react-native-icons/ios/ReactNativeIcons.xcodeproj`?
2.引用libReactNativeIcons.a:?
單機項目,在右面的面板中選擇`Build Phases`下的`Link Binary With Libraries`,點擊`+`號添加庫:?
?

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都勾選上:
?
?

## 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圖標:

怎么用呢?看下面代碼:
~~~
'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`就是這么簡單.所以的引用都是`庫名的引用名|圖標的名稱`,效果如下:

- 前言
- 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插件