之前的文章講述了在RN項目中如何使用NavigationBar，如何調用原生模塊已卷，以及集成下拉刷新和上拉加載更多的功能，今天介紹一個第三方插件react-native-tab-navigator，講述我是如何使用它在RN項目中使用TabBar

項目源碼在這里

1. 安裝插件

    npm install react-native-tab-navigator --save
   

2. 使用

   就我的demo來說：
   Demo中包含了Navigator管理的一系列視圖占哟，我嘗試過使用一個Tab管理多個由Navigator管理的一系列視圖
   (這跟我之前的iOS開發(fā)經(jīng)驗有關华烟，在iOS中Application的根視圖是TabBarController翩迈，這個TabBarController管理多個由NavigationController管理的一系列ViewController）

   但是這有一個問題：

   場景切換的時候可能有隱藏TabBar的需求，按照剛才說的方法盔夜，我需要set一個值來控制tabbar的height和overflow负饲，又由于component的生命周期函數(shù)中沒有類似于iOS中-（void)viewWillAppear;的方法，所以沒有很好的方法把隱藏的tabbar再顯示出來（如果你有解決這個問題的方法喂链，請告訴我）返十。

   那么換一種思路：

   把管理一系列視圖的Tab交由一個Navigator管理，雖然這樣違背了iOS開發(fā)的普通思路椭微，但是就目前在RN項目中洞坑，沒有發(fā)現(xiàn)太大的問題（有一個問題是只有一級頁面顯示TabBar，所有二級頁面全部不顯示蝇率，不過就國內大多數(shù)應用設計風格來看迟杂，這個問題也不算是問題）刽沾。

3. react-native-vector-icons
   這是一個圖標庫，有興趣話可以去這里深入了解排拷，簡單使用請執(zhí)行下邊兩條命令即可

    $ npm install react-native-vector-icons --save
    $ rnpm link
   

   使用：

    import Icon from 'react-native-vector-icons/Ionicons';
    <Icon name={ 'ios-home' }
   

4. 關鍵部分代碼

    //root.js
    import React from 'react'
    import {
        Navigator
    } from 'react-native';
    import { Provider } from 'react-redux'
    import configureStore from './store/store.js'
    import App from './containers/app.js'
    const store = configureStore();
    
    class Root extends React.Component {
        render() {
            return (
                <Provider store={ store }>
                    //在原來<App />的基礎上添加Navigator
                    <Navigator 
                        initialRoute={{ component: App }}
                        configureScene={(route) => {
                            return Navigator.SceneConfigs.FloatFromRight;
                        }}
                        renderScene={(route, navigator) => {
                            let Component = route.component;
                            return <Component {...route.params} navigator={navigator} />
                        }} />
                </Provider>
            );
        }
    }
    export default Root;
   
    //----------------------
    //app.js  ( render(){} ) 
    
    render() {
        const { reducer } = this.props;
        console.log("============",reducer.tabbarHeight);
        return (
            <TabNavigator tabBarStyle={{ backgroundColor:'white' }} style={{backgroundColor: 'white'}}>
                <TabNavigator.Item
                    title="主頁"
                    selected={this.state.selectedTab === 'home'}
                    renderIcon={() => <Icon name={ 'ios-home' } size={30} color={'gray'}/>}
                    renderSelectedIcon={() => <Icon name={ 'ios-home' } size={30} color={'#4E78E7'}/>}
                    onPress={() => this.setState({ selectedTab: 'home' })}>
                    <ProductListContainer {...this.props} />
                </TabNavigator.Item>
                <TabNavigator.Item
                    title="其他"
                    selected={this.state.selectedTab === 'other'}
                    renderIcon={() => <Icon name={ 'ios-more' } size={30} color={'gray'}/>}
                    renderSelectedIcon={() => <Icon name={ 'ios-more' } size={30} color={'#4E78E7'}/>}
                    onPress={() => this.setState({ selectedTab: 'other' })}>
                    <OtherContainer {...this.props}/>
                </TabNavigator.Item>
            </TabNavigator>
        );
    }
   

5. 效果圖

   tabba