react-native的tabbar和navigator混合使用

前段时间搭建项目使用了navigator和react-native-tab-navigator，现在我教大家搭建一个通用的简单框架。

先把几张图贴在这里，这就是我们今天要搭建的东西，别看页面简单，但是可塑性强啊(我才不会说我已经懒到一定程度了呢...)!

1.     2.            3.

上面的三张图就是咱们要搭建的简单框架。

大家都知道，一般一个app都有导航、tabbar以及tabbaritem的子页面。那么上面的第一张就是导航初始化的页面，图2是tabbar的页面，图3就是tabbaritem的子页面。

废话不多说，直接干活！

一、初始化路由

在react-native里面路由就是navigator，关于navigator做过移动端开发的童鞋应该都不陌生。iOS里面叫UINavigationController,Android里面应该叫Action Bar吧。

对于一个app我们一般只用一个路由。所以在程序启动的时候我们要初始化路由。

我习惯把路由初始化放在一个单独的文件中，下面放上代码

import React, { Component } from 'react';
import {
  AppRegistry,
  Navigator,
  Platform,
} from 'react-native';

import LogIn from './login';

const defaultRoute = {
  component: LogIn,
};

export default class NavIndex extends Component {
  _renderScene(route, navigator) {
    let Component = route.component;
    return (
      <Component {...route.params} navigator={navigator} />
    );
  }
  render() {
    return (
      <Navigator
        initialRoute={defaultRoute}
        renderScene={this._renderScene}
        
        />
    );
  }
}

当然我们注册应用入口的时候直接注册navigator这个模块就可以了，我这里写的navigator其实是非常简单的，这也就是把路由初始化在上面第一个页面，一般除了引导页，那么程序第一个页面就是登陆页面，登陆页面看上面就知道我写的比较简单，代码就不粘贴了，点击登陆实现方法

_onPage(){
this.props.navigator.push({
component:TabbarView,
})
}

跳转到图二，也就是Tabbar页面，当然，登陆页面不一定非得跳到tabbar页面，这里只是一个简单的框架代码，有对Navigator想要深入了解的童鞋，可以看官网文档，或者可以看这里江清清的技术专栏，里面都有详细介绍。

二、Tabbar的使用

关于tabbar，这里我用了react-native-tab-navigator，这理我介绍一下怎么使用，首先需要install：  npm install react-native-tab-navigator --save

然后import就可以引用了，这是github上的一个开源框架，我感觉还挺好用的。

现在我们来搭建tabbar。

constructor(props) {  
    super(props);  
    this.state = {selectedTab: '通知'}  
}  
  
  render() {
    return (
    <View style={styles.container}>
        <TabNavigator hidesTabTouch={true} tabBarStyle={styles.tab}>
          <TabNavigator.Item  
            selected={this.state.selectedTab === '通知'}  
            title='通知'
            renderIcon={() => <Image style={styles.tabIcon} />}  
            renderSelectedIcon={() => <Image style={styles.tabIcon} />}  
            onPress={() => this.setState({ selectedTab: '通知' })}>  
　　　　　　　
　　　　　　　　//MeView是tabbaritem的页面
            <MeView navigator={this.props.navigator}/>

          </TabNavigator.Item>
        
        </TabNavigator>
      </View>
    );
  }
}

这就是这个框架的简单使用，其中renderIcon和renderSelectedIcon是点击和nomal显示的图片，styles.tabIcon可以自定义图片的属性。

有的童鞋在使用tabbar的时候，push不到下一个页面,那么看这一句，<MeView navigator={this.props.navigator}/>，加上navigator={this.props.navigator}，MeView就能跳转到它的子页面了。这一句话是必不可少的，在MeView中Push的话，MeView的子页面中tabbar会消失，因为MeView的子页面是一个全新的页面。它没有继承Tabbar，但是如果单独给MeView添加navigator的话，MeView的子页面就继承了Tabbar，这也就是一个给tabbar加导航还是给页面加导航的问题。

写到这，基本上这个简单的框架也就完成的差不多了。

三、tabbarItem子页面

到这里已经接近尾声，那么来看一下图三。图三的文字我也加了一个点击方法

_onBack(){
this.props.navigator.pop()
}

一看就明白，push，pop，这个是返回的方法，点几一下试试，你肯定会发现，tabbar在主页面又出现了!

最后怎么能不放上源代码呢？

代码放在github上了：https://github.com/Demon404/react-native-navtab