详解js界面跳转与值传递

index.Android.js

&＃39;use strict&＃39;
import React, { Component } from &＃39;react&＃39;;
import { AppRegistry,Navigator,BackAndroid} from &＃39;react-native&＃39;;
 
var Register = require(&＃39;./study/Register&＃39;);
let RegisterResult = require(&＃39;./study/RegisterResult&＃39;);
var NaviModule = React.createClass({
 
  //告知Navigator模块，我们希望在视图切换时，用什么效果
  configureScene:function(route){
    return Navigator.SceneConfigs.FadeAndroid;
  },
 
  //告知Navigator模块，我们希望如何挂接当前视图
  renderScene:function(router,navigator){
    this._navigator = navigator;
    switch(router.name){
      case "register":
        return 
      case "registerResult":
        return 
 
    }
  },
 
  //React的生命周期函数---组件被挂接时调用
  componentDidMount:function(){
    var navigator = this._navigator;
    BackAndroid.addEventListener(&＃39;NaviModuleListener&＃39;,()=>{
      if (navigator && navigator.getCurrentRoutes().length > 1) {
        navigator.pop();
        return true;
      }
      return false;
    });
  },
 
  //React的生命周期函数---组件被移除时调用
  componentWillUnmount: function(){
    BackAndroid.removeEventListener(&＃39;NaviModuleListener&＃39;);
  },
 
  render:function(){
    return (
      
      );
  }
 
});
 
AppRegistry.registerComponent(&＃39;FirstDemo&＃39;, () => NaviModule);

注册页（Register.js）

&＃39;use strict&＃39;
import React, { Component } from &＃39;react&＃39;;
import {
 AppRegistry,
 StyleSheet,
 Text,
 View,
 TextInput
} from &＃39;react-native&＃39;;
 
let DimensiOns= require(&＃39;Dimensions&＃39;);
let totalWidth = Dimensions.get(&＃39;window&＃39;).width;
let leftStartPoint = totalWidth * 0.1;
let compOnetWidth= totalWidth * 0.8;
 
let Register = React.createClass({
 
  getInitialState:function(){
    return {
      inputedNum :&＃39;&＃39;,
      inputedPW:&＃39;&＃39;,
  },
 
  updatePW: function(newText){
    this.setState({inputedPW : newText});
  },
 
 render: function() {
  return (
   
     this.setState({inputedNum :aa})}/>
    
     您输入的手机号：{this.state.inputedNum}
    
     this.updatePW(newText)}/>
    
     注 册
    
   );
 },
 
 userRegister:function(){
  this.props.navigator.replace({
   telephoneNumber : this.state.inputedNum,
   name: &＃39;registerResult&＃39;,
  });
 }
 
});
 
const styles = StyleSheet.create({
 container: {
  flex: 1,
  flexDirection:&＃39;column&＃39;,
  justifyContent: &＃39;center&＃39;,
  backgroundColor: &＃39;#F5FCFF&＃39;,
 },
 numberInputStyle:{
  top:20,
  left:leftStartPoint,
  width:componetWidth,
  backgroundColor:&＃39;gray&＃39;,
  fontSize:20
 },
 textPromptStyle:{
  top:30,
  left:leftStartPoint,
  width:componetWidth,
  fontSize:20
 },
 passwordInputStyle:{
  top:50,
  left:leftStartPoint,
  width:componetWidth,
  backgroundColor:&＃39;gray&＃39;,
  fontSize:20
 },
 bigTextPrompt:{
  top:70,
  left:leftStartPoint,
  width:componetWidth,
  backgroundColor:&＃39;gray&＃39;,
  color:&＃39;white&＃39;,
  textAlign:&＃39;center&＃39;,
  fontSize:60
 }
});
 
module.exports = Register;

注册结果页RegisterResult.js

&＃39;use strict&＃39;
import React, { Component } from &＃39;react&＃39;;
import {
 AppRegistry,
 StyleSheet,
 Text,
 View,
 TextInput
} from &＃39;react-native&＃39;;
 
let RegisterResult = React.createClass({
 
  render:function(){
    return(
      
        
          {this.props.telephoneNumber}注册成功
        
      
    );
  }
 
});
 
const styles = StyleSheet.create({
  container: {
  flex: 1,
  flexDirection:&＃39;column&＃39;,
  justifyContent: &＃39;center&＃39;,
  alignItems:&＃39;center&＃39;,
  backgroundColor: &＃39;#F5FCFF&＃39;,
 },
 text:{
  flexWrap:&＃39;wrap&＃39;,
  backgroundColor:&＃39;gray&＃39;,
  fontSize:20,
  paddingTop:10,
  paddingBottom:10,
  paddingLeft:25,
  paddingRight:25
 },
});
 
module.exports = RegisterResult;