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

之前的文章讲述了在RN项目中如何使用NavigationBar，如何调用原生模块，以及集成下拉刷新和上拉加载更多的功能，今天介绍一个第三方插件 react-native-tab-navigator ，讲述我是如何使用它在RN项目中使用TabBar

项目源码在这里

安装插件

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

使用

就我的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，所有二级页面全部不显示，不过就国内大多数应用设计风格来看，这个问题也不算是问题）。
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' }
```

关键部分代码

//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>
     );
 }