Navigator使用，参数传递

1、index.android.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, {Component} from 'react';
import {
    AppRegistry,
    View,
    Navigator,
    Text,
    BackAndroid,
    StyleSheet,
    ToolbarAndroid,
    TouchableHighlight
} from 'react-native';
import Login from './components/Login';

var _navigator;// 全局变量
BackAndroid.addEventListener('hardwareBackPress', () => {
    if (_navigator && _navigator.getCurrentRoutes().length > 1) {
        _navigator.pop();
        return true;
    }
    return false;
});

// 控制页面如何跳转的总枢纽
let RouteMapper = function (route, navigationOperations) {
    _navigator = navigationOperations;
    let Component_ = route.component;
    if(Component_){
        return 
    }
};

export default class Home extends Component {
    render() {
        let firstPageRouter = 'login';
        let firstComponent = Login;
        return (
            
        );
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#593012',
    },
});

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

2、Login.js

/**
 * Created by Administrator on 2017/2/23.
 */
import React, {Component, PropTypes} from 'react';

import {
    AppRegistry,
    View,
    Navigator,
    Text,
    BackAndroid,
    StyleSheet,
    ToolbarAndroid,
    TouchableHighlight
} from 'react-native';

import MainScene from './MainScene';

export default class Login extends Component {

    static defaultProps = {
        navigator:null,
    }

    constructor(props) {
        super(props);
        this.state = {
            user : null,
        }
    }

    login(){
        let this_ = this;
        this.props.navigator.push({
            name: 'main',
            component:MainScene,
            params:{//传给其他页面的参数,这些个参数是作为props传给下个页面的
                title: '这是从登录跳转而来',
                id : 1,
                // 为了获取下个页面返回给这个页面的数据，这里使用了一个回调函数
                getUser:function (user) {
                    this_.setState({
                        user:user,
                    });
                }
            },
        });
    }

    render() {
        if(this.state.user){
            return(
                
                    
                        用户信息: { JSON.stringify(this.state.user) }
                    
                
            );
        }else {
            return (
                
                    
                        
                            登录
                        
                    

                    
                        
                            注册
                        
                    
                
            );
        }
    };
}

3、MainScene.js

/**
 * Created by Administrator on 2017/2/23.
 */
import React, {Component, PropTypes} from 'react';

import {
    AppRegistry,
    View,
    Navigator,
    Text,
    BackAndroid,
    StyleSheet,
    ToolbarAndroid,
    TouchableHighlight
} from 'react-native';


const USER = {
    1: {name : "lxr",age : 39},
    2: {name : "zbs",age : 67},
};

let onActionSelected = function (position) {
    if (position == 0) {
        console.log("===============> 患者列表")
    } else if (position == 1) {
        console.log("===============> 电子病历")
    }
}

let onIconClick = function () {
    console.log("===============> onIconClick")
}

export default class MainScene extends Component {

    static defaultProps = {
        title: null,
        navigator:null,
    }

    constructor(props) {
        super(props);
    }

    toBack(){
        const id_ = this.props.id;
        const getUser = this.props.getUser;
        if(id_ && getUser){
            let user = USER[id_];
            getUser(user);
        }
        if(this.props.navigator){
            this.props.navigator.pop();
        }
    }

    render() {
        return (
            
                
                
                    
                        点击我返回上一个页面，携带有参数。
                    
                
            
        );
    };
}

var styles = StyleSheet.create({
    toolbar: {
        backgroundColor: '#666666',
        height: 56,
    },
});

4、参考资料

1、ReactNative官方文档
2、ReactNative 中文文档
3、新手理解Navigator的教程