详解js界面跳转与值传递

前端之家收集整理的这篇文章主要介绍了详解js界面跳转与值传递前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

注册

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

index.Android.js

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)

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

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;

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

原文链接:https://www.f2er.com/js/44272.html

猜你在找的JavaScript相关文章