本文实例实现的功能如下:
注册页
(Register.js),点击注册,跳到注册结果页(RegisterResult.js),并将注册的手机号传递过去,显示xx注册成功。index.Android.js
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 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 (
});
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
render:function(){
return(
});
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;