[iOS] React-Native 項目中使用 TabBar

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

項目源碼在這里

1. 安裝插件

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

2. 使用

   就我的demo來說：

   Demo中包含了Navigator管理的一系列視圖，我嘗試過使用一個 Tab 管理多個由 Navigator 管理的一系列視圖

   (這跟我之前的iOS開發經驗有關，在iOS中 Application 的根視圖是 TabBarController ，這個 TabBarController 管理多個由 NavigationController 管理的一系列 ViewController ）

   但是這有一個問題：

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

   那么換一種思路：

   把管理一系列視圖的 Tab 交由一個 Navigator 管理，雖然這樣違背了iOS開發的普通思路，但是就目前在RN項目中，沒有發現太大的問題（有一個問題是只有一級頁面顯示TabBar，所有二級頁面全部不顯示，不過就國內大多數應用設計風格來看，這個問題也不算是問題）。

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

   $ 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

來自：http://www.jianshu.com/p/7a4899bde137

Save