Detailed explanation of js interface jump and value transfer

The functions implemented in the example of this article are as follows: On the registration page (Register.js), click Register, jump to the registration result page (RegisterResult.js), and pass the registered mobile phone number to it, showing that xx has been successfully registered.

index.Android.js

'use strict'
import React, { Component } from 'react';
import { AppRegistry,Navigator,BackAndroid} from 'react-native';
 
var Register = require('./study/Register');
let RegisterResult = require('./study/RegisterResult');
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 <Register navigator = {navigator}/>
      case "registerResult":
        return <RegisterResult telephoneNumber = {router.telephoneNumber} navigator = {navigator}/>
 
    }
  },
 
  //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 (
      <Navigator
        initialRoute = {{name:&#39;register&#39;}}
        configureScene = {this.configureScene}
        renderScene = {this.renderScene} />
      );
  }
 
});
 
AppRegistry.registerComponent(&#39;FirstDemo&#39;, () => NaviModule);

Registration page (Register.js)

'use strict'
import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 View,
 TextInput
} from 'react-native';
 
let Dimensions = require('Dimensions');
let totalWidth = Dimensions.get('window').width;
let leftStartPoint = totalWidth * 0.1;
let componetWidth = totalWidth * 0.8;
 
let Register = React.createClass({
 
  getInitialState:function(){
    return {
      inputedNum :'',
      inputedPW:'',
  },
 
  updatePW: function(newText){
    this.setState({inputedPW : newText});
  },
 
 render: function() {
  return (
   <View style={styles.container}>
    <TextInput style = {styles.numberInputStyle}
     placeholder = {&#39;请输入手机号&#39;}
     onChangeText = {(aa) => this.setState({inputedNum :aa})}/>
    <Text style={styles.textPromptStyle}>
     您输入的手机号：{this.state.inputedNum}
    </Text>
    <TextInput style={styles.passwordInputStyle}
     placeholder = {&#39;请输入密码&#39;}
     password = {true}
     onChangeText = {(newText) => this.updatePW(newText)}/>
    <Text style={styles.bigTextPrompt}
     onPress = {this.userRegister}>
     注 册
    </Text>
   </View>);
 },
 
 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;

Registration result page RegisterResult.js

'use strict'
import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 View,
 TextInput
} from 'react-native';
 
let RegisterResult = React.createClass({
 
  render:function(){
    return(
      <View style = {styles.container}>
        <Text style = {styles.text}>
          {this.props.telephoneNumber}注册成功
        </Text>
      </View>
    );
  }
 
});
 
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;