详解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 相关文章推荐
JavaScript和JQuery实用代码片段(一)
Apr 07 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
vue权限管理系统的实现代码
Jan 17 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 Javascript
小程序自定义圆形进度条
Nov 17 Javascript
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数据缓存技术
2007/02/14 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
分享php多功能图片处理类
2016/05/15 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
javascript中的一些注意事项 更新中
2010/12/06 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
python 文件和路径操作函数小结
2009/11/23 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
Python dict的常用方法示例代码
2020/06/23 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
汽车销售顾问求职自荐信
2014/01/01 职场文书
竞选部门副经理的自荐书范文
2014/02/11 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
毕业横幅标语
2014/10/08 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android