本文通过注册页到结果页的完整示例，演示了React Native中如何利用Navigator组件实现页面跳转，并通过props将手机号从注册页传递至结果页进行显示，帮助开发者掌握基础的路由与数据交互逻辑。
React Native界面跳转与参数传递实战
本文通过一个具体实例，演示了如何从注册页面（Register.js）点击注册按钮后，跳转至注册结果页面（RegisterResult.js），并将用户的手机号作为参数传递过去，最终在结果页显示“xx注册成功”的完整流程。
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('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）
'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;
注册结果页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:'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;
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。