RN提供兩種導(dǎo)航器：NavigatorIOS和Navigator，NavigatorIOS只適配iOS宵晚，而Navigator即適配iOS又適配安卓。以下為Navigator通用導(dǎo)航器和TabNavigator通用的TabBar切換器尚镰。附效果圖

注意使用TabNavigator時(shí)需要以下操作：
打開(kāi)終端歧强，cd到工程根目錄下，然后執(zhí)行命令：

npm i react-native-tab-navigator --save

這樣就可以獲取到已封裝好的TabBar框架.
在node_modules中能夠查看到下載到本地的框架文件

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  Platform, //判斷當(dāng)前運(yùn)行的系統(tǒng) Platform.OS === 'ios'
  Navigator
} from 'react-native';

import TabNavigator from 'react-native-tab-navigator';

var Home = require('../Home/XMGHome');
var Shop = require('../Shop/XMGShop');
var Mine = require('../Mine/XMGMine');
var More = require('../More/XMGMore');

var Main = React.createClass({

  // 初始化函數(shù)(變量是可以改變的沙热，充當(dāng)狀態(tài)機(jī)的角色)
  getInitialState() {
    return {
      selectedTab:'home'
    }
  },

  render() {
    return (
      <TabNavigator>
        { /*首頁(yè)*/ }
        <TabNavigator.Item
          title="首頁(yè)"
          renderIcon={() => <Image source={require('./../Source/zr_exam.png')} style={styles.iconStyle} />}
          renderSelectedIcon={() => <Image source={require('./../Source/zr_exam_h.png')} style={styles.iconStyle} />}
          onPress={() => {this.setState({ selectedTab: 'home' })}}
          selected={this.state.selectedTab === 'home'}
          >
          <Navigator
            initialRoute={{name:'首頁(yè)',component:Home}}
            configureScene={(route,navigator)=>{
              return Navigator.SceneConfigs.FloatFromBottom;
            }}
            renderScene={(route,navigator)=>{
              let Component = route.component;
              return <Component {...route.passProps} navigator={navigator}/>;
            }}
          />
        </TabNavigator.Item>
        { /*商家*/ }
        <TabNavigator.Item
          title="商家"
          renderIcon={() => <Image source={require('./../Source/zr_home.png')} style={styles.iconStyle} />}
          renderSelectedIcon={() => <Image source={require('./../Source/zr_home_h.png')} style={styles.iconStyle} />}
          onPress={() => {this.setState({ selectedTab: 'shop' })}}
          selected={this.state.selectedTab === 'shop'}
          >
            <Navigator
              initialRoute={{name:'商家',component:Shop}}
              configureScene={(route,navigator)=>{
                return Navigator.SceneConfigs.PushFromRight;
              }}
              renderScene={(route,navigator)=>{
                let Component = route.component;
                return <Component {...route.passProps} navigator={navigator}/>;
              }}
            />
        </TabNavigator.Item>
        { /*我的*/ }
        <TabNavigator.Item
          title="我的"
          renderIcon={() => <Image source={require('./../Source/zr_konwledge.png')} style={styles.iconStyle} />}
          renderSelectedIcon={() => <Image source={require('./../Source/zr_konwledge_h.png')} style={styles.iconStyle} />}
          onPress={() => {this.setState({ selectedTab: 'mine' })}}
          selected={this.state.selectedTab === 'mine'}>
          <Navigator
            initialRoute={{name:'我的',component:Mine}}
            configureScene={(route,navigator)=>{
              return Navigator.SceneConfigs.PushFromRight;
            }}
            renderScene={(route,navigator)=>{
              let Component = route.component;
              return <Component {...route.passProps} navigator={navigator}/>;
            }}
          />
        </TabNavigator.Item>
        { /*更多*/ }
        <TabNavigator.Item
          title="更多"
          renderIcon={() => <Image source={require('./../Source/zr_train.png')} style={styles.iconStyle} />}
          renderSelectedIcon={() => <Image source={require('./../Source/zr_train_h.png')} style={styles.iconStyle} />}
          onPress={() => {this.setState({ selectedTab: 'more' })}}
          selected={this.state.selectedTab === 'more'}
          >
            <Navigator
              initialRoute={{name:'更多',component:More}}
              configureScene={(route,navigator)=>{
                return Navigator.SceneConfigs.PushFromRight;
              }}
              renderScene={(route,navigator)=>{
                let Component = route.component;
                return <Component {...route.passProps} navigator={navigator}/>;
              }}
            />
        </TabNavigator.Item>
      </TabNavigator>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  iconStyle: {
    width: 22,
    height: 22
  }
});

module.exports = Main;

搭建的框架效果圖：

框架.png