react-native-vector-icons的簡單使用,圖片,按鈕,標籤視圖,導航條

標籤：

ICONS是可以直接使用圖片名, 就能載入圖片的三方,使用很方便, 你不需要在工程檔案夾裡塞各種圖片, 節省很多空間,下面就來看看怎麼使用吧!

1. 首先開啟terminal進入到我們的工程檔案夾下, (不會建立工程的請參考:http://blog.csdn.net/margaret_mo/article/details/51304062)

輸入: npm install react-native-vector-icons --save (斷行符號)

輸入: npm install rnpm -g

輸入: rnpm link (斷行符號)  

2. 在Finder中用Xcode開啟工程: .../Demo/ios/Demo.xcodeproj

(1).右鍵工程檔案Add Files to "(你工程名)"

(2).選擇node_modules/react-native-vector-icons/Fonts檔案

(3).點擊"完成".

3. 在xcode的Info.plist檔案中,加入: Fonts provided by application數組,並加入以下9項:

到此環境就算設定好了, 接下來就是使用ICONS了.

4. 在Finder中右鍵用Atom開啟工程:

5.然後就開始編輯我們的程式了:

 'use strict';import React, {  //匯入下面需要使用的原生組件  AppRegistry,  Component,  View,  StyleSheet,  AlertIOS,  Text,  TabBarIOS,  NavigatorIOS,} from 'react-native';var Icon = require('react-native-vector-icons/FontAwesome');<span style="white-space:pre"></span>import FindComponent from './FindComponent';<span style="white-space:pre"></span>//發現頁組件import SearchComponent from './SearchComponent';<span style="white-space:pre"></span>//搜尋網頁組件class Demo extends Component {  state = {    selectedTab: 'find',  };  loginWithFacebook = () => {   //點擊"Login with Facebook"按鈕後觸發的方法    AlertIOS.alert("facebook");  }  render() {    return (      <View style={styles.container}>        <Icon          name="rocket"   //圖片名串連,可以到這個網址搜尋:http://ionicons.com/, 使用時:去掉前面的 "icon-" !!!!          size={30}   //圖片大小          color="red"  //圖片顏色          />        <Icon.Button    //在圖片後加文字          name="facebook"          backgroundColor="#3b5998"          onPress={this.loginWithFacebook} //點擊該按鈕後觸發的方法          >          Login with Facebook        </Icon.Button>        <Icon.Button  //在圖片後加, 自訂樣式的文字          name="facebook"          backgroundColor="#3b5998">          <Text style={{fontFamily: 'Arial', fontSize: 15}}>Login with Facebook</Text>        </Icon.Button>        <TabBarIOS    //和標籤視圖一起使用         tintColor="#4977f0"         barTintColor="#E6E6E6">         <Icon.TabBarItem  //用 Icon.TabBarItem 代替 TabBarIOS.Item           title="發現"           iconName="home"           selectedIconName="home"           selected = {this.state.selectedTab === 'find'}           onPress={() => {             this.setState({               selectedTab: 'find',             });           }}>           <NavigatorIOS    //導覽列             style={styles.container}             tintColor='#FFFFFF'             barTintColor='#4977f0'             initialRoute={{               title: "發現",               titleTextColor: 'white',               component: FindComponent             }}/>         </Icon.TabBarItem>         <Icon.TabBarItem  //用 Icon.TabBarItem 代替 TabBarIOS.Item           title="搜尋"           iconName="search"           selectedIconName="search"           selected = {this.state.selectedTab === 'search'}           onPress={() => {             this.setState({               selectedTab: 'search',             });           }}>           <NavigatorIOS             style={styles.container}             tintColor='#FFFFFF'             barTintColor='#4977f0'             initialRoute={{               title: "搜尋",               titleTextColor: 'white',               component: SearchComponent             }}/>         </Icon.TabBarItem>       </TabBarIOS>      </View>    );  }}const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',  },});AppRegistry.registerComponent('Demo', () => Demo);

在terminal中的工程檔案夾下,輸入react-native run-ios(斷行符號)等待程式運行起來就能看到效果啦.

主要代碼: http://download.csdn.net/detail/margaret_mo/9512769

參考網站: https://github.com/oblador/react-native-vector-icons

react-native-vector-icons的簡單使用,圖片,按鈕,標籤視圖,導航條