Navigator導航器

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Navigator,
    TouchableOpacity

} from 'react-native';

/*
* 在ReactNative中,有兩個實現導航功能的組件:Navigator和NavigatorIOS
* Navigator 同支持android和ios ; NavgatorIOS支持ios
* NavigatorIOS 相對有更對的屬性和方法,在UI方面有更多的設置,如:backButtonIcon backButtonTitled onLeftButtonPress等等
*
* 若是想實現更多自定義,建議使用Navigator
*
* */

//1.實現導航功能,頁面切換
//2.實現導航功能, 傳值(下一篇)

/*
*  導航器經過路由對象(route)來分辨不一樣的場景,每一個路由對象都對應一個頁面組件,開發者設置什麼,導航器顯示什麼,因此route是導航器中重要的一個對象
*
*  三步操做實現導航功能:
*  1.設置路由對象(告訴導航器要顯示哪一個頁面)
*  建立路由對象,對象的內容自定義,可是必須包含該場景須要展現的頁面組件
*
*  2.場景渲染配置(告訴導航器我要什麼樣的頁面跳轉效果)
*
*  3.渲染場景(告訴導航器如何渲染頁面)
*  利用第一步設置的路由對象進行渲染場景
*
* */

//1.定義第一個頁面
var FirstPage = React.createClass({
    //按鈕onPress事件處理方法
    pressPush:function () {
        //推出下一級頁面
        //參數是路由對象,不要再次寫 三個步驟
        var nextRoute = {
            component:SecondPage
        }
        this.props.navigator.push(nextRoute)

    },
    render:function () {
        return(
          <View style={[styles.flex,{backgroundColor:"yellow"}]}>
              <TouchableOpacity style={styles.btn} onPress={this.pressPush}>
                  <Text>點擊push下一頁</Text>
              </TouchableOpacity>
          </View>
        );
    }


});
//2.第二個頁面
var SecondPage = React.createClass({
    pressPop:function () {
        //返回上一界面
        this.props.navigator.pop()
    },
    render:function () {
        return(
            <View style={[styles.flex, {backgroundColor:"cyan"}]}>
                <TouchableOpacity onPress={this.pressPop}>
                    <Text>pop返回上一頁</Text>
                </TouchableOpacity>
            </View>
        );

    }

});

//
var  LessoNavigator = React.createClass({
   render:function () {
       var  rootRoute={
         component:FirstPage
       };

       return(
           <Navigator
           /*步驟:
           * 1. initialRoute
           *
           * 指定了默認的頁面,也就是啓動app以後會看到的第一屏幕(啓動頁)
           * 對象的屬性是自定義的,這個對象中的內容會在renderScene方法中處理
           * 備註:必須包含的屬性,component,表示須要渲染的頁面組件
           *
           * */
               initialRoute={rootRoute}

initialRoute={{ component: Home, // 要跳轉的頁面

title:'首頁', // 跳轉頁面導航欄標題

leftButtonTitle:'左邊', // 實例化左邊按鈕

onLeftButtonPress:() => {alert('左邊')}, // 左邊按鈕點擊事件

rightButtonTitle:'右邊', // 實例化右邊按鈕

onRightButtonPress:() => {alert('右邊')} // 右邊按鈕點擊事件 }}

               /*               * 2.configureScene               * 場景渲染的配置 (跳轉效果)               *               * 箭頭函數               * */               configureScene={(route) => {                   //效果:從右側向左推出                   return Navigator.SceneConfigs.PushFromRight;///////////////////////此句沒有提示,有問題????               }}               /*               * 3.renderScene               *               * 渲染場景               * 參數:route(第一步建立並設置給導航器的路由對象),navigator(導航器對象)               * 實現:給須要顯示的組件設置屬性               *               * */               renderScene={(route, navigator ) => {                   //從route路由對象中獲取頁面組件                   var  Component = route.component;                   return(                       <Component                           navigator={navigator}                           route={route}                       />                   )               }}           />       );   }});var styles = StyleSheet.create({    flex:{        flex:1,        justifyContent:"center",        alignItems:"center"    },    btn:{        width:150,        height:30,        borderColor:"red",        borderWidth:1,        justifyContent:"center",        alignItems:"center"    }});