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');
import FindComponent from './FindComponent';
import SearchComponent from './SearchComponent';


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