详解js界面跳转与值传递

2024-03-09 02:15:04 374

本文实例实现的功能如下：注册页(Register.js)，点击注册，跳到注册结果页(RegisterResult.js)，并将注册的手机号传递过去，显示xx注册成功。

index.Android.js

'usestrict'
importReact,{Component}from'react';
import{AppRegistry,Navigator,BackAndroid}from'react-native';

varRegister=require('./study/Register');
letRegisterResult=require('./study/RegisterResult');
varNaviModule=React.createClass({

//告知Navigator模块，我们希望在视图切换时，用什么效果
configureScene:function(route){
returnNavigator.SceneConfigs.FadeAndroid;
},

//告知Navigator模块，我们希望如何挂接当前视图
renderScene:function(router,navigator){
this._navigator=navigator;
switch(router.name){
case"register":
return<Registernavigator={navigator}/>
case"registerResult":
return<RegisterResulttelephoneNumber={router.telephoneNumber}navigator={navigator}/>

}
},

//React的生命周期函数---组件被挂接时调用
componentDidMount:function(){
varnavigator=this._navigator;
BackAndroid.addEventListener('NaviModuleListener',()=>{
if(navigator&&navigator.getCurrentRoutes().length>1){
navigator.pop();
returntrue;
}
returnfalse;
});
},

//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）

'usestrict'
importReact,{Component}from'react';
import{
AppRegistry,
StyleSheet,
Text,
View,
TextInput
}from'react-native';

letDimensions=require('Dimensions');
lettotalWidth=Dimensions.get('window').width;
letleftStartPoint=totalWidth*0.1;
letcomponetWidth=totalWidth*0.8;

letRegister=React.createClass({

getInitialState:function(){
return{
inputedNum:'',
inputedPW:'',
},

updatePW:function(newText){
this.setState({inputedPW:newText});
},

render:function(){
return(
<Viewstyle={styles.container}>
<TextInputstyle={styles.numberInputStyle}
placeholder={'请输入手机号'}
onChangeText={(aa)=>this.setState({inputedNum:aa})}/>
<Textstyle={styles.textPromptStyle}>
您输入的手机号：{this.state.inputedNum}
</Text>
<TextInputstyle={styles.passwordInputStyle}
placeholder={'请输入密码'}
password={true}
onChangeText={(newText)=>this.updatePW(newText)}/>
<Textstyle={styles.bigTextPrompt}
onPress={this.userRegister}>
注册
</Text>
</View>);
},

userRegister:function(){
this.props.navigator.replace({
telephoneNumber:this.state.inputedNum,
name:'registerResult',
});
}

});

conststyles=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;

注册结果页RegisterResult.js

'usestrict'
importReact,{Component}from'react';
import{
AppRegistry,
StyleSheet,
Text,
View,
TextInput
}from'react-native';

letRegisterResult=React.createClass({

render:function(){
return(
<Viewstyle={styles.container}>
<Textstyle={styles.text}>
{this.props.telephoneNumber}注册成功
</Text>
</View>
);
}

});

conststyles=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;

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

详解js界面跳转与值传递

热门推荐

随机推荐