react-native試玩(35)-react-native-icons外掛程式

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	585	fontawesome
ionicons 2.0.0	733	ion
Foundation icons	283	foundation
Zocial	99	zocial
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就是這麼簡單.所以的引用都是庫名的引用名|表徵圖的名稱，效果如下: