前段時(shí)間搭建項(xiàng)目使用了navigator和react-native-tab-navigator，現(xiàn)在我教大家搭建一個(gè)通用的簡(jiǎn)單框架。

先把幾張圖貼在這里，這就是我們今天要搭建的東西，別看頁(yè)面簡(jiǎn)單，但是可塑性強(qiáng)啊(我才不會(huì)說(shuō)我已經(jīng)懶到一定程度了呢...)!

01.png

02.png

03.png

上面的三張圖就是咱們要搭建的簡(jiǎn)單框架。

大家都知道，一般一個(gè)app都有導(dǎo)航、tabbar以及tabbaritem的子頁(yè)面。那么上面的第一張就是導(dǎo)航初始化的頁(yè)面，圖2是tabbar的頁(yè)面，圖3就是tabbaritem的子頁(yè)面。

廢話不多說(shuō)，直接干活！

<h3>一、初始化路由</h3>
在react-native里面路由就是navigator，關(guān)于navigator做過(guò)移動(dòng)端開發(fā)的童鞋應(yīng)該都不陌生。iOS里面叫UINavigationController,Android里面應(yīng)該叫Action Bar吧。

對(duì)于一個(gè)app我們一般只用一個(gè)路由。所以在程序啟動(dòng)的時(shí)候我們要初始化路由。

我習(xí)慣把路由初始化放在一個(gè)單獨(dú)的文件中，下面放上代碼

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}
        
        />
    );
  }
}

當(dāng)然我們注冊(cè)應(yīng)用入口的時(shí)候直接注冊(cè)navigator這個(gè)模塊就可以了，我這里寫的navigator其實(shí)是非常簡(jiǎn)單的，這也就是把路由初始化在上面第一個(gè)頁(yè)面，一般除了引導(dǎo)頁(yè)，那么程序第一個(gè)頁(yè)面就是登陸頁(yè)面，登陸頁(yè)面看上面就知道我寫的比較簡(jiǎn)單，代碼就不粘貼了，點(diǎn)擊登陸實(shí)現(xiàn)方法

_onPage(){
this.props.navigator.push({
component:TabbarView,
})
}

跳轉(zhuǎn)到圖二，也就是Tabbar頁(yè)面，當(dāng)然，登陸頁(yè)面不一定非得跳到tabbar頁(yè)面，這里只是一個(gè)簡(jiǎn)單的框架代碼，有對(duì)Navigator想要深入了解的童鞋，可以看官網(wǎng)文檔，或者可以看這里江清清的技術(shù)專欄，里面都有詳細(xì)介紹。
<h3>二、Tabbar的使用</h3>
關(guān)于tabbar，這里我用了react-native-tab-navigator，這理我介紹一下怎么使用，首先需要install： npm install react-native-tab-navigator --save

然后import就可以引用了，這是github上的一個(gè)開源框架，我感覺還挺好用的。

現(xiàn)在我們來(lái)搭建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的頁(yè)面
            <MeView navigator={this.props.navigator}/>

          </TabNavigator.Item>
        
        </TabNavigator>
      </View>
    );
  }
}

這就是這個(gè)框架的簡(jiǎn)單使用，其中renderIcon和renderSelectedIcon是點(diǎn)擊和nomal顯示的圖片，styles.tabIcon可以自定義圖片的屬性。

有的童鞋在使用tabbar的時(shí)候，push不到下一個(gè)頁(yè)面,那么看這一句，<MeView navigator={this.props.navigator}/>，加上navigator={this.props.navigator}，MeView就能跳轉(zhuǎn)到它的子頁(yè)面了。這一句話是必不可少的，在MeView中Push的話，MeView的子頁(yè)面中tabbar會(huì)消失，因?yàn)镸eView的子頁(yè)面是一個(gè)全新的頁(yè)面。它沒有繼承Tabbar，但是如果單獨(dú)給MeView添加navigator的話，MeView的子頁(yè)面就繼承了Tabbar，這也就是一個(gè)給tabbar加導(dǎo)航還是給頁(yè)面加導(dǎo)航的問題。

寫到這，基本上這個(gè)簡(jiǎn)單的框架也就完成的差不多了。
<h3>三、tabbarItem子頁(yè)面</h3>
到這里已經(jīng)接近尾聲，那么來(lái)看一下圖三。圖三的文字我也加了一個(gè)點(diǎn)擊方法

_onBack(){
this.props.navigator.pop()
}

一看就明白，push，pop，這個(gè)是返回的方法，點(diǎn)幾一下試試，你肯定會(huì)發(fā)現(xiàn)，tabbar在主頁(yè)面又出現(xiàn)了!

最后怎么能不放上源代碼呢？
代碼放在github上了：https://github.com/Demon404/react-native-navtab

全文手打，轉(zhuǎn)載請(qǐng)注明出處，原文鏈接實(shí)在博客園，本人第一次用簡(jiǎn)書，格式現(xiàn)在還不太了解，請(qǐng)大家見諒！
博客園主頁(yè)（http://www.cnblogs.com/demon404/p/5807526.html）