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