详解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('NaviModuleListener',()=>{      if (navigator && navigator.getCurrentRoutes().length > 1) {        navigator.pop();        return true;      }      return false;    });  },  //React的生命周期函数---组件被移除时调用  componentWillUnmount: function(){    BackAndroid.removeEventListener('NaviModuleListener');  },  render:function(){    return (      <Navigator        initialRoute = {{name:'register'}}        configureScene = {this.configureScene}        renderScene = {this.renderScene} />      );  }});AppRegistry.registerComponent('FirstDemo', () => NaviModule);

'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 = {'请输入手机号'}     onChangeText = {(aa) => this.setState({inputedNum :aa})}/>    <Text style={styles.textPromptStyle}>     您输入的手机号：{this.state.inputedNum}    </Text>    <TextInput style={styles.passwordInputStyle}     placeholder = {'请输入密码'}     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: 'registerResult',  }); }});const styles = StyleSheet.create({ container: {  flex: 1,  flexDirection:'column',  justifyContent: 'center',  backgroundColor: '#F5FCFF', }, numberInputStyle:{  top:20,  left:leftStartPoint,  width:componetWidth,  backgroundColor:'gray',  fontSize:20 }, textPromptStyle:{  top:30,  left:leftStartPoint,  width:componetWidth,  fontSize:20 }, passwordInputStyle:{  top:50,  left:leftStartPoint,  width:componetWidth,  backgroundColor:'gray',  fontSize:20 }, bigTextPrompt:{  top:70,  left:leftStartPoint,  width:componetWidth,  backgroundColor:'gray',  color:'white',  textAlign:'center',  fontSize:60 }});module.exports = Register;

'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:'column',  justifyContent: 'center',  alignItems:'center',  backgroundColor: '#F5FCFF', }, text:{  flexWrap:'wrap',  backgroundColor:'gray',  fontSize:20,  paddingTop:10,  paddingBottom:10,  paddingLeft:25,  paddingRight:25 },});module.exports = RegisterResult;