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