详解js界面跳转与值传递


Posted in Javascript onNovember 22, 2016

本文实例实现的功能如下:注册页(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;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
jQuery实现强制cookie过期方法汇总
May 22 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
AngularJS中$apply方法和$watch方法用法总结
Dec 13 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
js实现界面向原生界面发消息并跳转功能
Nov 22 #Javascript
JavaScript面向对象分层思维全面解析
Nov 22 #Javascript
浅析location.href跨窗口调用函数
Nov 22 #Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 #Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 #Javascript
基于js实现checkbox批量选中操作
Nov 22 #Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 #Javascript
You might like
php查询ip所在地的方法
2014/12/05 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
JS中 用户登录系统的解决办法
2013/04/15 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
解决Django中调用keras的模型出现的问题
2019/08/07 Python
python中return的返回和执行实例
2019/12/24 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
学python爬虫能做什么
2020/07/29 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
django使用channels实现通信的示例
2020/10/19 Python
数控专业毕业生求职信范文
2013/09/21 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
合作经营协议书范本
2014/04/17 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
超市员工辞职信范文
2015/05/12 职场文书
雷锋的故事观后感
2015/06/10 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
Python类方法总结讲解
2021/07/26 Python