详解js界面跳转与值传递

本文实例实现的功能如下：

注册页

(Register.js)，点击注册，跳到注册结果页(RegisterResult.js)，并将注册的手机号传递过去，显示xx注册成功。

index.Android.js

rush: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
case "registerResult":
return

}

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

注册页

（Register.js）

rush: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 (

this.setState({inputednum :aa})}/> 您输入的手机号：{this.state.inputednum} this.updatePW(newText)}/> 注 册 ); },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,passwordInputStyle:{
top:50,bigTextPrompt:{
top:70,color:'white',textAlign:'center',fontSize:60
}
});

module.exports = Register;

注册结果页RegisterResult.js

rush:js;"> 'use strict' import React,TextInput } from 'react-native';

let RegisterResult = React.createClass({

render:function(){
return(

{this.props.telephoneNumber}注册成功 ); }

});

const styles = StyleSheet.create({
container: {
flex: 1,alignItems:'center',text:{
flexWrap:'wrap',fontSize:20,paddingTop:10,paddingBottom:10,paddingLeft:25,paddingRight:25
},});

module.exports = RegisterResult;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。