react-native的tabbar和navigator混合使用

时间：2023-03-08 19:02:33

前段时间搭建项目使用了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

相关文章