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