上篇文章講到構建京東客戶端首頁的搜尋欄，本篇我們一起來學習TabBar的構建。

根據之前的調研，在構建TabBar的方式上，我推薦使用國外大神James Ide（https://github.com/ide）釋出在Exponent上的react-native-tab-navigator（https://github.com/exponentjs/react-native-tab-navigator），這位大神封裝的控制元件簡單易用，而且更新速度還是跟得上的，甚至使用了一些ES7語法，同時他回覆ISSUE的速度也很不錯，我就問過他一個問題，過了一會兒就回復了。

不說那麼多了，首先來看一下TabBar的效果和佈局分析吧：

TabBar的外層為一個View（水平排布），內部為5個組合圖示，當選中時，切換相關頁面，TabBar按鈕呈現紅色，非選中時呈現白色，這些圖示也是已有UI切好的圖，所以邏輯處理比較簡單，主要控制好效果即可。

1.引入react-native-tab-navigator

我們可以在當前工程目錄下，使用npm i react-native-tab-navigator --save引入tab庫，目前最新版本為0.2.15

接著，我們在MainScreen類中將Tab控制元件import進來，具體程式碼如下：

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

export default class MainScreen extends Component {
    render() {
        return (
            <View style={{flex:1}}>
                <Header />
                <TabNavigator>
                    
                </TabNavigator>
            </View>
        );
    }
}
 

2.TabNavigator的樣式設定

sceneStyle：場景樣式，即Tab頁容器的樣式，可按View的style設定

tabBarStyle：TabBar的樣式，基本也可按照普通的style寫法進行設定

tabBarShadowStyle：TabBar陰影的樣式，不過對於扁平化的設計，這個屬性應該用處不大

hidesTabTouch：bool型別，即是否隱藏Tab按鈕的按下效果

根據我們上面對TabBar樣式的分析，我們可以按照如下樣式，為TabNavigator指定tabBarStyle

const styles = StyleSheet.create({
    tab: {
        height: 52,
        backgroundColor: '#333333',
        alignItems: 'center'
    }
});

可以看到高度和背景色已經是我們想要的效果了，接下來，我們就可以著手構建Tab的Item了。

3.Item的構建

TabNavigator的Item就是我們所看到的5個Tab按鈕以及它們所對應的頁面，這些頁面在Android中可能以Fragment呈現，在iOS中可能以UIView呈現，而在React Native中，則是一個<View>，我們可以自己義，也可以直接放置其他控制元件。

這些Item在TabNavigator中，以<TabNavigator.Item>形式呈現，其可設定的相關屬性如下：

renderIcon: 必填項，即圖示，但為function型別，所以這裡需要用到Arrow Function
renderSelectedIcon: 選中狀態的圖示，非必填，也是function型別
badgeText: 即Tab右上角的提示文字，可為String或Number，類似QQ中Tab右上角的訊息提示，非必填
renderBadge: 提示角標渲染方式，function型別，類似render的使用，非必填
title: 標題，String型別，非必填
titleStyle: 標題樣式，style型別，非必填
selectedTitleStyle: 選中標題樣式，style型別，非必填
selected: bool型，是否選中狀態，可使用setState進行控制，預設false
onPress: function型，即點選事件的回撥函式，這裡需要控制的是state，而切換頁面已經由控制元件本身幫我們實現好了
allowFontScaling: bool型，是否允許字型縮放，預設false

而對於我們所關心的頁面切換，在TabNavigator.Item中，可將其置於<TabNavigator.Item>{<View/>}</TabNavigator.Item>之中，即作為Item的子元素存在，這裡請注意：如果添加了一個Item，必須為其新增一個View，否則將無法執行！

接著，我們將相關的圖示匯入工程中，具體方法在上一篇部落格中已經介紹，這裡不再贅述。

為了程式碼的簡潔，我們可以設計一個TabItem的渲染函式_renderTabItem

這個函式可以為我們建立Item，所以我們必須提供圖片資源（包括選中狀態）、Tag（區分Tab）、子元素View，那麼函式程式碼就可以寫成如下形式：

    _renderTabItem(img, selectedImg, tag, childView) {
        return (
            <TabNavigator.Item
                selected={this.state.selectedTab === tag}
                renderIcon={() => <Image style={styles.tabIcon} source={img}/>}
                renderSelectedIcon={() => <Image style={styles.tabIcon} source={selectedImg}/>}
                onPress={() => this.setState({ selectedTab: tag })}>
                {childView}
            </TabNavigator.Item>
        );
    }

如果使用本地圖片，即在<Image>中，source屬性內使用require的形式引用圖片，由於js本身的性質，不可以使用動態的require，而應該直接require後的圖片資源當做引數傳遞！而使用uri形式獲取線上資源不受影響

在上面的程式碼中，由於TabBar控制元件的問題，我們可以在tabIcon樣式中，控制Icon的上邊距，以達到居中的效果，程式碼如下：

    tabIcon: {
        width: 30,
        height: 35,
        resizeMode: 'stretch',
        marginTop: 10
    }

                <TabNavigator hidesTabTouch={true} tabBarStyle={styles.tab}>
                    {this._renderTabItem(HOME_NORMAL, HOME_FOCUS, HOME, this._createChildView(HOME))}
                    {this._renderTabItem(CATEGORY_NORMAL, CATEGORY_FOCUS, CATEGORY, this._createChildView(CATEGORY))}
                    {this._renderTabItem(FAXIAN_NORMAL, FAXIAN_FOCUS, FAXIAN, this._createChildView(FAXIAN))}
                    {this._renderTabItem(CART_NORMAL, CART_FOCUS, CART, this._createChildView(CART))}
                    {this._renderTabItem(PERSONAL_NORMAL, PERSONAL_FOCUS, PERSONAL, this._createChildView(PERSONAL))}
                </TabNavigator>

1.特別注意：由於在onPress函式中呼叫了this.setState，所以必須在類的使用建構函式，並對state進行初始化：

    constructor(props) {
        super(props);
        this.state = {selectedTab: HOME}
    }

    _createChildView(tag) {
        return (
            <View style={{flex:1,backgroundColor:'#00baff',alignItems:'center',justifyContent:'center'}}>
                <Text style={{fontSize:22}}>{tag}</Text>
            </View>
        )
    }