react-native的tabbar和navigator混合使用

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

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

1.react-native的tabbar和navigator混合使用     2.react-native的tabbar和navigator混合使用            3.react-native的tabbar和navigator混合使用

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

大家都知道,一般一个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

上一篇:EventLoop和EventLoopGroup


下一篇:QTP重要功能总结