Android中通过React Native的Navigator实现场景跳转及数据传递

    在React Native中要想实现Navigator导航器切换不同的界面就要先了解一个知识：其实了解过React Native的都应该知道，其实我们通过React Native写的这些“界面”，都是依附在一个Android应用中的Activity上的，所以这些“界面”其实被称为场景（Scene），摆放在一个屏幕中的组件，就共同构成了一个“场景（Scene）”场景简单来说其实就是一个占据全屏页面的React组件。

   因为index.android.js这个文件相当于我们程序的入口，我们要在这个文件中创建我们的导航器对象，所以先看index.android.js这个文件中的内容：

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View,  Navigator} from 'react-native';//一定要注意导包（这里导入的是你要显示的场景的包），不然跳转会报错import MyScene from './MyScene';export default class Skip extends Component {  render() {    let defaultName = 'MyScene';    let defaultComponent = MyScene;    return (        <Navigator    //指定了默认的页面，也就是启动app之后会看到的第一屏，需要两个参数，name跟component   //通过给initialRoute对象设置名称和对应的组件完成route的初始化，即只要传入需要跳转的组件的名称和组建对象，即可在renderScene中完成页面的跳转。    initialRoute={{ name: defaultName, component: defaultComponent }}    configureScene={(route) => {      return Navigator.SceneConfigs.VerticalDownSwipeJump;//下滑移出界面 FadeAndroid:表示的是淡入淡出的动画效果    }}    //导航器的加载方法    renderScene={(route, navigator) => {      let Component = route.component;      if(route.component){        //可以通过route里面的数据来渲染指定的内容,并且传递导航器对象到目标页面      route.params是为了方便场景之间传递数据        return <Component {...route.<span style="background-color: rgb(255, 0, 0);">params</span>} navigator={navigator} />      }    }}     />  );  }}//设置的一些样式const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',  },  welcome: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },  instructions: {    textAlign: 'center',    color: '#333333',    marginBottom: 5,  },});AppRegistry.registerComponent('Skip', () => Skip);

   然后看我一进入应用后要显示的场景MyScene.js文件(在该文件中，我没把导包内容粘上):

import MyTo from './MyTo';export default class MyScene extends Component {  constructor(props){    super(props);    this.state = {      resultMessage:"返回来的数据的默认占位内容",    };  }   //在响应方法中，调用navitager的push方法，进入到下一个场景页面当中  _pressButton(){    const {navigator} = this.props;    //创建对象，作用就是能够拿到当前这个方法的对象，不然在使用this时，可能拿到其他方法的对象    var _this = this;    if (navigator) {      //打印日志，可以查看调试信息      console.log("----------------");      //就是将信息传递给导航器，我们就可以在这个时候将参数传递给Navigator      navigator.push({        name:'Second',        component:Second,        <span style="background-color: rgb(255, 0, 0);">params</span>:{          message:"这是从第一个界面中传递的数据",          //通过这种回调，获取到上一个页面中传递回来的数据          getResult:function(myMessage){            _this.setState({              resultMessage:myMessage,            })          }        }      })    }  }  render() {    return (        //这个组件用于封装视图，使其能够正确的响应触摸操作        //此组件与TouchableHighlight的区别在于并没有额外的颜色变化，更适于一般场景      <View >    <TouchableOpacity onPress={this._pressButton.bind(this)}>        <Text style={{fontSize:30}}>{this.state.resultMessage}</Text>    </TouchableOpacity>      </View>    )  }    }

  最后看我要跳转到的那个场景MyTo.js文件：

import React, { Component } from 'react';import { View, Text,StyleSheet,TouchableOpacity } from 'react-native';export default class MyTo extends Component {    constructor(props){        super(props);        this.state = {       //显示传递过来的数据的默认占位数据       message:"aaa",        };    }    //生命周期函数  在渲染之后调用   componentWillMount 在渲染之前调用    componentDidMount(){        this.setState({            message:this.props.message,        });    }      //点击调用的事件，在这个事件中实现返回上一个场景，并通过回调传递数据给上一个场景    _pressButton(){        const { navigator } = this.props;        //给navigator设置一个回调方法，用于给第一个页面设置信息，这样就可以完成返回时数据的传递        if(this.props.getResult){            this.props.getResult("这是从第二个界面中传递过来的数据");        }        if(navigator){            //类似于直接退出堆栈，返回上一个场景页面            navigator.pop();        }    }    //我们通过控制路由栈将页面出栈的方式pop()完成跳转回到第一个页面的功能    render(){        return (            <View>        <TouchableOpacity onPress={this._pressButton.bind(this)}>    <Text style={{fontSize:30}}>点击返回前一个界面</Text>        </TouchableOpacity>        <Text>第一个界面传入：{this.state.message}</Text>        </View>    );    }}