1.專案目錄結構:

2.程式碼實現:
(1) index.ios.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import FirstVC from './FirstVC.js'
import SecondVC from './SecondVC.js'
import ThirdVC from './ThirdVC.js'

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
    TabBarIOS,
} from 'react-native'
 
;

export default class RN extends Component {

  constructor(props){
      super(props)
      this.state= {
          selectedTab: '圖書',
      }
  }


  render() {
    return (

        <TabBarIOS
            /**
            * TabBar 預設的屬性
            * barTintColor: tabBar的背景色
            * //指定item的位置
            * itemPositioning是個列舉:fill, center, auto
            * translucent: bool 是否要半透明
            * style:是個View型別
            /**
         /**
         * tintColorItem未選中時的顏色
         */
 

            unselectedTintColor="yellow"
            //Item選中的顏色
            tintColor="white"
            //tabBar的背景顏色
            barTintColor= 'darkslateblue'
            //itemPositioning= 'auto'
            translucent= {true}
            >
          <TabBarIOS.Item
              title='首頁'
              /**
              * badge: string,number
              * 角標: 測試可以顯示紅色的是七位,數字無限制
              */
 

              badge="99"
              /**
              * systemIcon: 列舉 ('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated')
              * 設定了此屬性,會覆蓋我們自定義的
              */
              //systemIcon = 'bookmarks'
              //引用Xcode裡面的Images.xcassets
              //icon = {require('image!book')}
              //引用外部的img資料夾
              icon = {require('./img/book.png')}
              //選中的圖片
              selectedIcon = {require('./img/movie.png')}
              selected={this.state.selectedTab === '圖書'}
              //標籤被選中時會呼叫,
              onPress={() => {
                this.setState({
                    selectedTab: '圖書'
                 });
              }}
              >
              <FirstVC />
          </TabBarIOS.Item>

          <TabBarIOS.Item
              title='電影'
              icon = {require('./img/movie.png')}
              selected = {this.state.selectedTab === '電影'}
              onPress={() => {
            this.setState({
              selectedTab: '電影'
            });
              }}
              >
             <SecondVC />
          </TabBarIOS.Item>

          <TabBarIOS.Item
              title='音樂'
              //icon = {require('./img/music.png')}
              selected = {this.state.selectedTab === '音樂'}
              onPress={() => {
            this.setState({
              selectedTab: '音樂'
            });
              }}
              >
             <ThirdVC />
          </TabBarIOS.Item>

        </TabBarIOS>
    );
  }
}

const styles = StyleSheet.create({

});

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

(2)FirstVC.js

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TabBarIOS,
} from 'react-native';

export default class RN extends Component {

    render() {
        return(
            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                <Text style={{fontSize:20}}>123</Text>
            </View>
        )
    }
}

(3)SecondVC.js

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TabBarIOS,
} from 'react-native';

export default class RN extends Component {

    render() {
        return(
            <View style={[styles.textCenter]}>
                <Text style={{fontSize:19}}>我的首秀</Text>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    textCenter:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'red',
        //alignSelf:'center',
    }
});

(3)ThirdVC.js

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TabBarIOS,
} from 'react-native';

export default class RN extends Component {

    render() {
        return(
            <View style={{flex:1, width: 100, height:100,backgroundColor:'green',alignItems:'center',justifyContent:'center'}}>
                <Text>90909090</Text>
            </View>
        )
    }
}

效果圖: