首先我們要知道Navigator是什么？

    Navigator他是一個(gè)界面的管理器拂盯，也可以說(shuō)是路由，做過(guò)安卓的都知道，它就相當(dāng)于我們的Activity的棧，來(lái)存放應(yīng)用的界面贬养。

需要注意的是Navigator一定要在初始界面進(jìn)行初始化，要不然在其他界面獲取不到對(duì)象琴庵。

看下他的方法：

• initialRoute: 初始路由误算，也就是我們需要在navigator棧底放置的路由，因?yàn)榇藭r(shí)也是棧頂迷殿，因此也就是初始化整個(gè)App的首頁(yè)儿礼。

• configureScene: 設(shè)置頁(yè)面切換動(dòng)畫(huà)，具體的值大家可以在node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js 源庫(kù)中找到贪庙≈├纾或者直接在sublime Text 3 中使用命令command+p 命令翰苫，然后輸入NavigatorSceneConfigs進(jìn)行文件搜索止邮。筆者看了一下，大概有不到十種動(dòng)畫(huà)奏窑，這里就不做具體介紹了导披。

• renderScene: 渲染當(dāng)前路由場(chǎng)景，也就是渲染棧頂路由埃唯×秘埃回調(diào)方法里一個(gè)參數(shù)是當(dāng)前路由route，

• 另一個(gè)是navigator 路由棧墨叛。這里需要細(xì)講一下：
  route: 路由里包含一個(gè)必要的component變量和一些可選的參數(shù)止毕，而component則就是當(dāng)前需要渲染的組件。其他的一些可選的參數(shù)也是以鍵值對(duì)的方式保存在route對(duì)象中漠趁，并在這里以屬性的方式傳遞給對(duì)應(yīng)的component組件中扁凛。

• navigator: 這是Navigator組件在本回調(diào)方法中的參數(shù)，也就是我們?cè)谇斑吿岬降穆酚蓷４炒?huì)在每次渲染新route的時(shí)候以屬性的形式傳遞給route中component的對(duì)象谨朝。它可以在對(duì)應(yīng)的場(chǎng)景中做一些操作，這里我們給出官方的部分文檔：
  getCurrentRoutes() - 獲取當(dāng)前棧里的路由，也就是push進(jìn)來(lái)字币，沒(méi)有pop掉的那些则披。
  jumpBack() - 跳回之前的路由，當(dāng)然前提是保留現(xiàn)在的洗出，還可以再跳回來(lái)士复，會(huì)給你保留原樣。
  jumpForward() - 上一個(gè)方法不是調(diào)到之前的路由了么翩活，用這個(gè)跳回來(lái)就好了判没。
  jumpTo(route) - 跳轉(zhuǎn)到已有的場(chǎng)景并且不卸載。
  push(route) - 跳轉(zhuǎn)到新的場(chǎng)景隅茎，并且將場(chǎng)景入棧澄峰，你可以稍后跳轉(zhuǎn)過(guò)去
  pop() - 跳轉(zhuǎn)回去并且卸載掉當(dāng)前場(chǎng)景
  replace(route) - 用一個(gè)新的路由替換掉當(dāng)前場(chǎng)景
  replaceAtIndex(route, index) - 替換掉指定序列的路由場(chǎng)景
  replacePrevious(route) - 替換掉之前的場(chǎng)景
  immediatelyResetRouteStack(routeStack) - 用新的路由數(shù)組來(lái)重置路由棧
  popToRoute(route) - pop到路由指定的場(chǎng)景，其他的場(chǎng)景將會(huì)卸載辟犀。
  popToTop() - pop到棧中的第一個(gè)場(chǎng)景俏竞，卸載掉所有的其他場(chǎng)景。
  {...route} 這是一句 es6 語(yǔ)法堂竟，表示將route中所有的鍵值對(duì)以屬性賦值的方式展開(kāi)魂毁，也就是{name: 'pober', gender: 'man'} 到 name = 'pober' gender = 'man'之間的轉(zhuǎn)換。這樣就把route對(duì)象中所有的鍵值對(duì)就很容易地放到route.component組件的props屬性中去啦～因此出嘹，這個(gè)語(yǔ)法在自定義控件的時(shí)候也經(jīng)常用到席楚，主要用來(lái)兼容組件中其他所有的屬性，如自定義ListView兼容官方ListView的所有屬性税稼。
  passProps 這是一個(gè)我們自己定義的key烦秩，后邊會(huì)提到。同樣是可選的

原文鏈接：http://www.reibang.com/p/03ddca8f1982

廢話不多說(shuō)我們直接上主要代碼

import React, {Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
} from 'react-native';

//引入主界面
var Home = require('./Home');
//相當(dāng)于application,Navigatory一定要在應(yīng)用啟動(dòng)的時(shí)候初始化
class RnDemo extends Component {
  constructor (props) {
    super(props)
  }

  render () {
    return (
      <Navigator style = {styles.container}
                 initialRoute={{
          component: Home   //將根界面壓棧
        }}
                 renderScene={(route, navigator) => { // 用來(lái)渲染navigator棧頂?shù)膔oute里的component頁(yè)面
          return <route.component navigator={navigator} {...route} {...route.passProps}/>// {...route.passProps}即就是把passProps里的鍵值對(duì)全部以給屬性賦值的方式展開(kāi) 如：test={10}
        }}/>
    )
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});
AppRegistry.registerComponent('RnDemo', () => RnDemo);

import React, {Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ListView,
  ToastAndroid,
  ToolbarAndroid,
  DrawerLayoutAndroid,
  Dimensions,
  TouchableOpacity,
  InteractionManager,
} from 'react-native';

var page = 1;
var REQUEST_URL = 'http://gank.io/api/data/Android/10/' + page;


//引入歡迎界面
var SplashScreen = require('./js/SplashScreen');
//引入關(guān)于我的界面
var AboutMe = require('./js/AboutMe');


//引入返回圖標(biāo)
var back_bg = require('./img/menu.png');
//側(cè)滑欄頂部的背景
var drawable_bg = require('./img/drawerlayout.png');


//存放返回的數(shù)據(jù)的數(shù)組
var movieData = new Array();

//主界面
class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
    };
  }

  //界面開(kāi)始加載獲取數(shù)據(jù)
  componentDidMount() {
    this.fetchData(REQUEST_URL);
  }


  //接受請(qǐng)求成功的回調(diào)的結(jié)果
  onResoutData(responseData) {
    var concat = movieData.concat(responseData.results);
    movieData = concat;
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(movieData),
      loaded: true,
    });
  }


  render() {
    //如果是第一打開(kāi)加載就先打開(kāi)歡迎界面
    if (!this.state.loaded) {
      return (
        <SplashScreen />
      );

    }

    //初始化側(cè)邊欄
    return this.renderDrawableView();

  }

  //打開(kāi)側(cè)滑欄
  onPenLeftDrawable() {
    this.drawer.openDrawer();
  }

  //加載網(wǎng)絡(luò)數(shù)據(jù)
  fetchData(REQUEST_URL) {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.onResoutData(responseData)
      })
  }

  //監(jiān)聽(tīng)滑動(dòng)到底部
  loadmore() {
    page++;
    var REQUEST_URL = 'http://gank.io/api/data/Android/10/' + page;
    this.fetchData(REQUEST_URL);

  }


  //返回側(cè)滑欄
  renderDrawableView() {
    //側(cè)滑列表顯示的布局
    var navigationView = (
      <View style={styles.drawableContainer}>

        <View style={styles.drawableHeard}>

          <Image
            style={styles.drawableHeard}
            source={drawable_bg}
          />

          <Text style={styles.drawableHeardItem1}>
            Lazy
          </Text>

          <Text style={styles.drawableHeardItem1}>
            讓生活更精彩
          </Text>

        </View>

        <TouchableOpacity onPress={this.onPressDraweraboutMeItem.bind(this)}>
        <View style={styles.drawableContainer2}>
          <Text style={styles.drawableHeardItem2}>關(guān)于我</Text>
        </View>
        </TouchableOpacity>


        <TouchableOpacity onPress={this.onPressDrawerCloseItem.bind(this)}>
        <View style={styles.drawableContainer2}>
        <Text style={styles.drawableHeardItem2}>關(guān)閉</Text>
        </View>
        </TouchableOpacity>
      </View>
    );




    return (
      <DrawerLayoutAndroid
        ref={(drawer) => { this.drawer = drawer; }}
        drawerWidth={Dimensions.get('window').width / 5 * 3}
        drawerPosition={DrawerLayoutAndroid.positions.left}
        //這個(gè)是加載側(cè)邊劃出的布局
        renderNavigationView={() => navigationView}
      >

        <View style={styles.container2}>
          <ToolbarAndroid   //標(biāo)題欄
            navIcon={back_bg}
            onIconClicked={this.onPenLeftDrawable.bind(this)} //左上角打開(kāi)側(cè)劃?rùn)邳c(diǎn)擊方法
            titleColor='#ffffff'  //只支持RGB數(shù)值郎仆，設(shè)置標(biāo)題的字體顏色
            style={styles.toolbar}
            title="Android資源列表"></ToolbarAndroid>
          <ListView
            initialListSize={1}
            onEndReachedThreshold={10}
            dataSource={this.state.dataSource}
            renderRow={this.renderMovie}
            onEndReached={this.loadmore.bind(this)}
            style={styles.listviewstyle}
          />
        </View>
      </DrawerLayoutAndroid>
    );
  }

  //關(guān)于我
  onPressDraweraboutMeItem(){
    this.drawer.closeDrawer();
    //延長(zhǎng)在執(zhí)行回調(diào)方法只祠，提高體驗(yàn),打開(kāi)關(guān)于我的界面，并且將我的界面壓棧
    InteractionManager.runAfterInteractions(() => {
      this.props.navigator.push({
        component: AboutMe,
      });
    });

  }


  //關(guān)閉側(cè)滑欄
  onPressDrawerCloseItem(){
    this.drawer.closeDrawer();
  }




  //顯示干活數(shù)據(jù)的具體邏輯
  renderMovie(results) {
    return (
      <View style={styles.container}>
        <Image
          source={{uri: results.url}}
          style={styles.thumbnail}
        />
        <View style={styles.rightContainer}>
          <Text style={styles.title}>{results.desc}</Text>
          <Text style={styles.year}>{results.createdAt}</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({


  drawableContainer2: {
    marginTop:5,
    height: 30,
    backgroundColor: '#838383'
  },


  drawableHeardItem2: {
    color: '#fcfcfc',
    fontSize: 15,
    marginLeft: 10,
    marginTop:5,
  },


  drawableContainer: {
    flex: 1,
    backgroundColor: '#fcfcfc'
  },



  drawableHeard: {
    width: Dimensions.get('window').width / 5 * 3,
    height: 120,
    justifyContent: 'flex-end',  //與父組件的底部對(duì)齊扰肌。
    paddingBottom: 10,
    backgroundColor: '#3e9ce9'
  },



  drawableHeardItem1: {
    fontSize: 20,
    textAlign: 'left',  //靠左
    color: '#fcfcfc',
    marginLeft: 10,
  },



  toolbar: {
    backgroundColor: 'blue',
    height: 56,

  },


  container2: {
    flex: 1,
    flexDirection: 'column', //豎直按順序從上往下排列
  },



  container: {
    flexDirection: 'row', //按順序從左往右排列
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },



  thumbnail: {
    width: 53,
    height: 81,
  },



  rightContainer: {
    flex: 1,
  },


  title: {
    fontSize: 20,
    marginBottom: 8,
    textAlign: 'center',
  },



  year: {
    textAlign: 'center',
  },


  listviewstyle: {
    paddingTop: 20,
    backgroundColor: '#F5FCFF',

  },
});

//暴漏給其他模塊調(diào)用
module.exports = Home;

注釋我已經(jīng)寫(xiě)的很清楚了抛寝，完整的代碼：https://github.com/l123456789jy/RnDemo