方法一 :

這是在 react-native 中文官網上的例子,親測功能效果很不錯,推薦使用

1. 建立一個  tabbar.js   檔案

'use strict';

var React = require('react');
var ReactNative = require('react-native');
var {
    StyleSheet,
    TabBarIOS,
    Text,
    View,
} = ReactNative;

var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg=='
 
;

var TabBarExample = React.createClass({
    statics: {
        title: '<TabBarIOS>',
        description: 'Tab-based navigation.',
    },

    displayName: 'TabBarExample',

    getInitialState: function() {
        return {
            selectedTab: 'redTab',
            notifCount: 0,
            presses
 
: 0,
        };
    },

    _renderContent: function(color, pageText, num) {
    return (
        <View style={[styles.tabContent, {backgroundColor: color}]}>
            <Text style={styles.tabText}>{pageText}</Text>
            <Text style={styles.tabText}>{num} re-renders of
 
 the {pageText}</Text>
        </View>
    );
},

render: function() {
    return (
        <TabBarIOS
            unselectedTintColor="yellow"
            tintColor="white"
            barTintColor="darkslateblue">
            <TabBarIOS.Item
                title="Blue Tab"
                icon={{uri: base64Icon, scale: 3}}
                selected={this.state.selectedTab === 'blueTab'}
                onPress={() => {
                    this.setState({
                        selectedTab: 'blueTab',
                    });
                }}>
                {this._renderContent('#414A8C', 'Blue Tab')}
            </TabBarIOS.Item>
            <TabBarIOS.Item
                systemIcon="history"
                badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
                selected={this.state.selectedTab === 'redTab'}
                onPress={() => {
                    this.setState({
                        selectedTab: 'redTab',
                        notifCount: this.state.notifCount + 1,
                    });
                }}>
                {this._renderContent('#783E33', 'Red Tab', this.state.notifCount)}
            </TabBarIOS.Item>
            <TabBarIOS.Item
                icon={require('./Images/dkw.png')}
                selectedIcon={require('./Images/waitToDesign1.png')}
                renderAsOriginal
                title="More"
                selected={this.state.selectedTab === 'greenTab'}
                onPress={() => {
                    this.setState({
                        selectedTab: 'greenTab',
                        presses: this.state.presses + 1
                    });
                }}>
                {this._renderContent('#21551C', 'Green Tab', this.state.presses)}
            </TabBarIOS.Item>
        </TabBarIOS>
    );
},

});

var styles = StyleSheet.create({
    tabContent: {
        flex: 1,
        alignItems: 'center',
    },
    tabText: {
        color: 'white',
        margin: 50,
    },
});

module.exports = TabBarExample;

2. 直接在   index.ios.js   中匯入  tabbar.js  即可:

 var HelloReactNative = require("./tabBar");

方法二 :

貌似已經淘汰了,反正我敲碼後實現不了所需要的效果,出現了一整塊灰色的蒙版^_^!!

1. 直接在   index.ios.js   中編寫:

//TabBarIOS元件(導航功能)

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TabBarIOS
} from 'react-native';
/*
*   在 ReactNative 中,實現頁面切換,提供了兩個元件: TabBarIOS 和 TabBarIOS.Item
*
*   常用效能
*
*   selected: 是否選中某個 Tab, 如果 true 則選中並顯示元件
*   title: 標題
*   barTintColor: Tab欄的背景顏色
*   icon: 圖示
*   onPress: 點選事件.當某個 tabbar 選中時,需要改變元件的 selected={ture}設定
* */

//把需要的 js 檔案匯入
var MovieListt = require("./movieListView");
var Imaget = require("./movieListView");
var Moviet = require("./movieListView");

var HelloReactNative = React.createClass({
    render:function () {
        return(
            <TabBarIOS style={{flex:1}}>
                <TabBarIOS.Item
                    title="Item1"
                    icon={require("./Images/dkw.png")}>
                    <MovieListt/>
                </TabBarIOS.Item>

                <TabBarIOS.Item
                    title="Item2"
                    icon={require("./Images/waitToDesign1.png")}>
                    <Imaget></Imaget>
                </TabBarIOS.Item>

               <TabBarIOS.Item
                   title="Item13"
                   icon={require("./Images/2p_03.png")}>
                   <Moviet></Moviet>
                </TabBarIOS.Item>
            </TabBarIOS>
        );
    }
});

AppRegistry.registerComponent('HelloReactNative', () => HelloReactNative);