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

原文地址：https://www.jb51.cc/react/307159.html