react-native 页面切换的实现

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
var React = require('react-native');
var {
    AppRegistry,
    Component,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    ListView,
    NavigatorIOS,
    TouchableHighlight,
} = React;

var dazhongdemo=React.createClass({
    OnRightButtonPress:function(){
      this.refs.nav.push({
          title:'设置',
          component:ForRightScene      //点击导航右侧的按钮跳转到的页面
      })
    },
    render:function() {
        return (
            <NavigatorIOS ref="nav"
                          style={styles.container}
                initialRoute={{
                component: HomeScene,//在NavigatorIOS中显示的第一个组件
                title: '主页',//组件的标题
                rightButtonTitle:'下一页',//导航工具栏右侧按钮显示的文本
                onRightButtonPress:this.OnRightButtonPress//当点金右侧按钮时执行的函数
                }}
            />
        );
    },
});

//实现第一个页面HomeScene
var HomeScene=React.createClass({
    onPress:function(){
      this.props.navigator.push({
          title:'个人中心',
          component:ForTouchScene
      });
    },
    render:function(){
         return (
            <View style={[styles.scene,{backgroundColor:'#DAF6FF'}]}>
                <TouchableHighlight onPress={this.onPress}>
                    <Text>点击进入个人中心</Text>
                </TouchableHighlight>
            </View>
        );
    },
});
//实现设置页面
var ForRightScene=React.createClass({
    render:function(){
        return(
            <View style={[styles.scene,{backgroundColor:'#FFF1E8'}]}>
                <Text>设置页面</Text>
            </View>
        )
    },
});
//实现个人中心页面
var ForTouchScene=React.createClass({
    render:function(){
        return(
        <View style={[styles.scene,{backgroundColor:'#ECF6E8'}]}>
            <Text>个人中心</Text>
        </View>
        )
    },
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    scene: {
        padding: 10,
        paddingTop:74,
        flex: 1,
    },
});

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