一：簡介

兩個TabBarIOS和TabBarIOS.Item元件可以實現頁面Tab切換的功能，Tab頁面切換的架構在應用開發中還是非常常見的.如:騰訊QQ,淘寶,美團外賣等等

二：TabBarIOS.Item屬性

1.View相關屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關屬性樣式)

2.badge string,number 在圖示的右上方顯示小紅色氣泡，顯示資訊

3.icon Image.propTypes.source Tab按鈕自定義的圖示，如果systemicon屬性被定義了，那麼該屬性會被忽略

4.onPress function 當Tab按鈕被選中的時候進行回撥，你可以設定selected={true}來設定元件被選中

5.selected bool 該屬性標誌子頁面是否可見，如果你看到一個空白的內容頁面，那麼你很有可能忘記了選中任何的一個頁面標籤Tab

6.selectedIcon Image.propTypes.source 設定當Tab按鈕被選中的時候顯示的自定義圖示，如果systemIcon屬性被設定了，那麼該屬性會被忽略。如果定義了icon屬性，但是當前的selectedIcon屬性沒有設定，那麼該圖示會被設定成藍色

7.style 設定樣式風格，繼承View的樣式各種風格

8.systemIcon enum('bookmarks','contacts','downloads','favorites','featured','history','more','most-recent','most-viewed','recents','search','top-rated') 這些圖示為系統預定義的圖示，如果你使用這些圖示，那麼你上面設定的標題，選中的圖示都會被這些系統圖標所覆蓋。

9.title string 在Tab按鈕圖示下面顯示的標題資訊，如果你設定了SystemIcon屬性，那麼該屬性會被忽略

三：TabBarIOS屬性

1.View相關屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關屬性樣式)

2.barTintColor color 設定tab條的背景顏色

3.style 繼承View的所有風格樣式

4.tintColor 當前被選中圖示的顏色

5.translucent bool 設定Tab欄是不是半透明的效果

四：例項程式碼：

上面我們主要對TabBarIOS以及TabBarIOS.Item元件做了相關講解介紹，下面我們針對該兩個元件看一下具體使用例項，以下程式碼經官方例項修改而來，具體程式碼如下:

import React, { Component } from 'react';

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

class iostaoge extends Component {

  constructor(props){
    super(props);
    this.state={
      selectedTab: '歷史',
      notifCount: 0,
      presses: 0,
    };
  }
  //進行渲染頁面內容
  _renderContent(color: string, pageText: string, num?: number) {
  return (
<View style={[styles.tabContent, {backgroundColor: color}]}>
<Text style={styles.tabText}>{pageText}</Text>
<Text style={styles.tabText}>第 {num} 次重複渲染{pageText}</Text>

</View>
);
}
  render() {
    return (
        <View style={{flex:1}}>
          <Text style={styles.welcome}>
            iOSTaoge React-Native Tabar-iOS
          </Text>
          <TabBarIOS
              style={{flex:1,alignItems:"flex-end"}}
              tintColor="white"
              barTintColor="darkslateblue">
            <TabBarIOS.Item
                title="自定義"
                icon={require('./images/flux.png')}
                selected={this.state.selectedTab === '自定義'}
                onPress={() => {
            this.setState({
              selectedTab: '自定義',
            });
          }}
            >
              {this._renderContent('#414A8C', '自定義介面')}
            </TabBarIOS.Item>
            <TabBarIOS.Item
                systemIcon="history"
                selected={this.state.selectedTab === '歷史'}
                badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
                onPress={() => {
            this.setState({
              selectedTab: '歷史',
              notifCount: this.state.notifCount + 1,
            });
          }}
            >
              {this._renderContent('#783E33', '歷史記錄', this.state.notifCount)}
            </TabBarIOS.Item>
            <TabBarIOS.Item
                systemIcon="downloads"
                selected={this.state.selectedTab === '下載'}
                onPress={() => {
            this.setState({
              selectedTab: '下載',
              presses: this.state.presses + 1
            });
          }}>
              {this._renderContent('#21551C', '下載頁面', this.state.presses)}
            </TabBarIOS.Item>

          </TabBarIOS>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  tabContent: {
    flex: 1,
    alignItems: 'center',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    marginTop: 20,
  },
  tabText: {
    color: 'white',
    margin: 50,
  },
});

效果圖：