TabBarIOS組件簡介

TabBarIOS組件通常顯示在手機屏幕的底部，在應用程序中，通過TabBarIOS組件可以在不同功能頁面之間進行切換。在React Native中，提供了兩個用于頁面間跳轉的組件，一個是Navigator組件，另一個就是TabBarIOS組件。我們可以對TabBarIOS組件的外觀進行設置，包括是否透明、背景色、選中標簽的顏色等。一個TabBarIOS組件上會有多個標簽(Item)，每個標簽可以在右上角顯示一個紅色的數字（Badge）。需要注意的是，在React Native中帶IOS或Android后綴的組件，都不能跨平臺運行，例如TabBarIOS組件就只能夠在iOS平臺使用。

TabBarIOS組件中提供了如下幾個屬性可以用于定制TabBar的樣式。

|屬性名稱|類型|說明|
|---|---|---|
|barTintColor |string |標簽欄的背景顏色。|
|tintColor |string |當前被選中的標簽圖標的顏色。|
|unselectedItemTintColor |string |當前沒有被選中的標簽圖標的顏色(僅在iOS 10及以上版本有效)|
|translucent |bool |決定標簽欄是否需要半透明化。|

TabBarIOS.Item

TabBarIOS上的每個標簽都是TabBarIOS.Item類型的組件，因此我們可以根據應用程序的需要來定制每個標簽的樣式和行為屬性。例如，我們可以定制標簽的圖標或者是監聽某個標簽被用戶點擊的動作，從而可以對顯示的界面進行切換。

TabBarIOS.Item中提供了如下一些常用屬性和方法用于定制每個標簽的樣式和功能。

|屬性名稱|類型|說明|
|---|---|---|
|badge |string, number |在圖標右上角顯示一個紅色的氣泡。|
|icon |Image.propTypes.source |給當前標簽指定一個自定義的圖標。如果定義了systemIcon屬性， 這個屬性會被忽略。|
|title |string |在圖標下面顯示的標題文字。如果定義了systemIcon屬性，這個屬性會被忽略。|
|selected |bool |這個屬性決定了子視圖是否可見。|
|onPress |function |當此標簽被選中時調用。|

示例代碼

下面的示例代碼中，創建了一個TabBarIOS組件，有兩個標簽History和More。通過點擊標簽可以切換界面的顯示內容，并且點擊History標簽可以更新標簽上的Badge數字。

• 在終端中執行如下命令，創建TabBarIOSDemo工程；

react-native init TabBarIOSDemo

• 使用Atom打開工程的index.ios.js文件，編寫組件所使用的樣式。

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

• 創建一個TabBarIOS組件實例，并添加兩個TabBarIOS.Item標簽，定制每個標簽的樣式以及點擊方法。

export default class TabBarIOSDemo extends Component {
  constructor(props) {
    super(props);
    this._renderContent = this._renderContent.bind(this);
    this.state = {
      selectedTab: 'redTab',
      notifCount: 0,
      presses: 0,
    };
  }
  //更新界面顯示內容
  _renderContent(color: string, num?: number) {
    return (
      <View style={[styles.tabContent, {backgroundColor: color}]}>
        <Text style={styles.tabText}>{num} 次刷新 </Text>
      </View>
    );
  }
  //界面組件配置與功能實現
  render() {
    return (
      <TabBarIOS
        unselectedTintColor="yellow"
        tintColor="white"
        barTintColor="darkslateblue">
        <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', this.state.notifCount)}
        </TabBarIOS.Item>
        <TabBarIOS.Item
          systemIcon='more'
          selected={this.state.selectedTab === 'greenTab'}
          onPress={() => {
            this.setState({
              selectedTab: 'greenTab',
              presses: this.state.presses + 1
            });
          }}>
          {this._renderContent('#21551C', this.state.presses)}
        </TabBarIOS.Item>
      </TabBarIOS>
    );
  }
}

• 使用import加載項目所使用的模塊，并且注冊組件TabBarIOSDemo成為整個應用的根容器。

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

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

• 在終端中執行下面的命令運行程序，在iOS模擬器中可以看到展示的TabBarIOS組件以及其中的兩個標簽，當我們點擊某一標簽時，屏幕顯示的內容會更新。

react-native run-ios

---