react native 导航

一. 简介

大多数应用都会有导航进行页面切换，React Native原生的控件仅有TabBarIOS可供iOS平台使用，如果想同时适配Android和IOS,最好使用第三方控件，比如:react-native-tab-navigator
地址:https://github.com/exponent/react-native-tab-navigator

二. 使用

（1）安装
在项目根目录下 使用命令行安装 npm install react-native-tab-navigator –save
（2）导入
import TabNavigator from ‘react-native-tab-navigator’;

import React, { Component } from 'react';  import {    AppRegistry,    StyleSheet,    Text,    View,    Image,  } from 'react-native';  //引入tabbar支持包  import TabNavigator from 'react-native-tab-navigator';  const TabNavigatorItem =TabNavigator.Item;  const TAB_NORMAL_1=require('./images/tabbar_1.png');  const TAB_NORMAL_2=require('./images/tabbar_2.png');  const TAB_NORMAL_3=require('./images/tabbar_3.png');  const TAB_NORMAL_4=require('./images/tabbar_4.png');  const TAB_PRESS_1=require('./images/tabbar_1_press.png');  const TAB_PRESS_2=require('./images/tabbar_2_press.png');  const TAB_PRESS_3=require('./images/tabbar_3_press.png');  const TAB_PRESS_4=require('./images/tabbar_4_press.png');  class toutiao extends Component {    constructor(){      super();      this.state={        selectedTab:'Home',      }    }    /**   tab点击方法   **/    onPress(tabName){      if(tabName){        this.setState(          {            selectedTab:tabName,          }        );      }    }     /**    渲染每项    **/     renderTabView(title,tabName,tabContent,isBadge){       var tabNomal;       var tabPress;       switch (tabName) {         case 'Home':           tabNomal=TAB_NORMAL_1;           tabPress=TAB_PRESS_1;           break;       case 'Video':         tabNomal=TAB_NORMAL_2;         tabPress=TAB_PRESS_2;         break;       case 'Follow':         tabNomal=TAB_NORMAL_3;         tabPress=TAB_PRESS_3;         break;       case 'Mine':         tabNomal=TAB_NORMAL_4;         tabPress=TAB_PRESS_4;         break;         default:       }       return(         <TabNavigatorItem          title={title}          renderIcon={()=><Image style={styles.tabIcon} source={tabNomal}/>}          renderSelectedIcon={()=><Image style={styles.tabIcon} source={tabPress}/>}          selected={this.state.selectedTab===tabName}          selectedTitleStyle={{color:'#f85959'}}          onPress={()=>this.onPress(tabName)}          renderBadge={()=>isBadge?<View style={styles.badgeView}><Text style={styles.badgeText}>20</Text></View>:null}         >         <View style={styles.container1}><Text>{tabContent}</Text></View>         </TabNavigatorItem>       );     }     /**    自定义tabbar    **/    tabBarView(){      return (        <TabNavigator         tabBarStyle={styles.tab}        >        {this.renderTabView('头条','Home','头条板块',true)}        {this.renderTabView('视频','Video','视频板块',false)}        {this.renderTabView('关注','Follow','关注板块',false)}        {this.renderTabView('我的','Mine','我的板块',false)}        </TabNavigator>      );    }    render() {      var tabBarView=this.tabBarView();      return (        <View style={styles.container}>          {tabBarView}      </View>      );    }  }  const styles = StyleSheet.create({    container: {      flex: 1,      backgroundColor: '#F5FCFF',    },  container1:{    flex:1,    justifyContent:'center',    alignItems:'center',  },   welcome: {      fontSize: 20,      textAlign: 'center',      margin: 10,    },    instructions: {      textAlign: 'center',      color: '#333333',      marginBottom: 5,    },    tab:{      height: 52,      alignItems:'center',      backgroundColor:'#f4f5f6',    },    tabIcon:{      width:25,      height:25,    },    badgeView:{      width:22,      height:14 ,      backgroundColor:'#f85959',      borderWidth:1,      marginLeft:10,      marginTop:3,      borderColor:'#FFF',      alignItems:'center',      justifyContent:'center',      borderRadius:8,    },    badgeText:{      color:'#fff',      fontSize:8,    }  });  // 导出模块module.exports = toutiao;