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加导航还是给页面加导航的问题。

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