前段时间搭建项目使用了navigator和react-native-tab-navigator，现在我教大家搭建一个通用的简单框架。
先把几张图贴在这里，这就是我们今天要搭建的东西，别看页面简单，但是可塑性强啊(我才不会说我已经懒到一定程度了呢...)!
上面的三张图就是咱们要搭建的简单框架。
大家都知道，一般一个app都有导航、tabbar以及tabbaritem的子页面。那么上面的第一张就是导航初始化的页面，图2是tabbar的页面，图3就是tabbaritem的子页面。
废话不多说，直接干活！
<h3>一、初始化路由</h3>
在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想要深入了解的童鞋，可以看官网文档，或者可以看这里江清清的技术专栏，里面都有详细介绍。
<h3>二、Tabbar的使用</h3>
关于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加导航还是给页面加导航的问题。
写到这，基本上这个简单的框架也就完成的差不多了。
<h3>三、tabbarItem子页面</h3>
到这里已经接近尾声，那么来看一下图三。图三的文字我也加了一个点击方法
_onBack(){
this.props.navigator.pop()
}
一看就明白，push，pop，这个是返回的方法，点几一下试试，你肯定会发现，tabbar在主页面又出现了!
最后怎么能不放上源代码呢？
代码放在github上了：https://github.com/Demon404/react-native-navtab
全文手打，转载请注明出处，原文链接实在博客园，本人第一次用简书，格式现在还不太了解，请大家见谅！
博客园主页（http://www.cnblogs.com/demon404/p/5807526.html）
