導航器（Navigator）

一、引入Navigator庫

在0.43以前我們是可以直接從'react-native'包中引入，但是在0.43之后如果直接從'react-native'中引入Navigator的話會直接報一個錯誤：

Navigator is deprecated and has been removed from this package. It can now be installed and import from ‘react-native-deprecated-custom-components’ instead of ‘react-native’

表示已經被從'react-native'中移除。并提示我們需要導入'react-native-deprecated-custom-components'這個包才能引用。
解決方案：
（1）用終端cd到當前項目的根目錄下；
（2）輸入命令：npm install react-native-deprecated-custom-components --save
（3）引入Navigator庫：import { Navigator } from 'react-native-deprecated-custom-components'

二、配置導航器

• step 1：設置路由對象（initialRoute）
  這個指定了默認的頁面，也就是啟動APP之后會看到的界面的第一屏。對象的屬性是自定義的，這個對象的內容會在renderScence方法中處理。且路由對象必須包含component，即需要渲染的頁面組件。

  initialRoute={rootRoute}
  

• step 2： 場景渲染的配置（configureScene）

  configureScene={(route)=> {
     return Navigator.SceneConfigs.PushFromRight;
  }}
  

• step 3： 渲染場景（renderScence）
  參數：route(第一步創(chuàng)建并設置給導航器的路由對象)，navigator(導航器對象)
  實現：給需要顯示的組件設置屬性

  renderScene={(route, navigator) => {
     // 從route對象中獲取頁面組件
     var Component = route.component;
     return (
         <Component
           navigator={navigator}
           route={route}
         />
     );
  }}
  

三、代碼實現

• 創(chuàng)建FirstPage類

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

/*引入SecondPage類*/
var SecondPage = require('./SecondPage');

var FirstPage = React.createClass({
  
  /*按鈕觸發(fā)方法，跳轉到SecondPage界面*/
  pressPush: function() {
    var nextRoute = {
      component: SecondPage,
      /*傳值*/
      passProps: {
          message: '我是傳到SecondPage的message'
      }
    };
    this.props.navigator.push(nextRoute)
  },

  render() {
    return(
      <View style={styles.containerView}>
        <TouchableOpacity
          style={styles.clickItemStyle}
          onPress={this.pressPush}
        >
          <Text> 點擊跳轉打下一個界面 </Text>
        </TouchableOpacity>
      </View>
    )
  }
});

var styles = StyleSheet.create({
  containerView: {
    flex: 1,
    backgroundColor: "cyan",
    justifyContent: 'center',
    alignItems: 'center',
  },

  clickItemStyle: {
    width: 200,
    height: 30,
    borderColor: 'red',
    borderWidth: 1,
    borderRadius: 5,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

// 輸出類
module.exports = FirstPage;

• 創(chuàng)建SecondPage類

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


var SecondPage = React.createClass({

  pressPop: function() {
    this.props.navigator.pop();
  },

  render() {
    return(
      <View style={styles.containerView}>
        <Text> {this.props.message} </Text>
        <TouchableOpacity
          style={styles.itemstyle}
          onPress={this.pressPop}
        >
          <Text> 點擊跳回上一界面 </Text>
        </TouchableOpacity>
      </View>
    )
  }
});

var styles = StyleSheet.create({
  containerView: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'yellow',
  },
  itemstyle: {
    width: 200,
    height: 30,
    borderColor: 'red',
    borderWidth: 1,
    borderRadius: 5,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

module.exports = SecondPage;

• 設置導航器

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

import { Navigator } from 'react-native-deprecated-custom-components'

var FirstPage = require('./FirstPage');

var LessonNavigator = React.createClass({
  render() {
    /* 創(chuàng)建路由對象 */
    var rootRoute = {
      component: FirstPage
    };

    return(
      <Navigator
        /*1.設置路由對象
          initialRoute

          這個指定了默認的頁面，也就是啟動APP之后會看到的界面的第一屏。
          對象的屬性是自定義的，這個對象中的內容會在renderScence方法中處理。

          備注：必須包含的屬性，即component，表示需要渲染的頁面組件
        */
        initialRoute={rootRoute}

        /*
          2.configureScene
          場景渲染的配置
        */
          configureScene={(route)=> {
            return Navigator.SceneConfigs.PushFromRight;
          }}

          /*
            3.renderScence
            渲染場景

            參數：route(第一步創(chuàng)建并設置給導航器的路由對象)，navigator(導航器對象)
            實現：給需要顯示的組件設置屬性
          */

          renderScene={(route, navigator) => {
            // 從route對象中獲取頁面組件
            var Component = route.component;
            return (
              <Component
                navigator={navigator}
                route={route}
                /*傳值*/
                {...route.passProps}
              />
            );
          }}
      />
    )
  }
})

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#4c4c4c',
  },
});

AppRegistry.registerComponent('LessonNavigator', () => LessonNavigator);