文档章节

详解js界面跳转与值传递

码农般的学良
 码农般的学良
发布于 2016/11/23 11:16
字数 674
阅读 0
收藏 0
点赞 0
评论 0

这篇文章主要为大家详细介绍了js界面跳转与值传递的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

 

 

'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('NaiModuleListener');

  },

 

  render:function(){

    return (

      <Navigator

        initialRoute = {{name:'register'}}

        configureScene = {this.configureScene}

        renderScene = {this.renderScene} />

      );

  }

 

});

 

AppRegistry.registerComponent('FirstDemo', () => NaviModule);

注册页(Register.js)

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

'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

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

'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;

以上就是本文的全部内容,希望对大家的学习有所帮助

© 著作权归作者所有

共有 人打赏支持
码农般的学良
粉丝 1
博文 20
码字总数 23265
作品 0
通州
js (jQuery) 之 取值

都是一些老生常谈,没什么新东西,算是开发过程中不知道怎么写去百度的一些东西 。都说程序员写博客是一个好习惯,算是一份保存笔记,以后不用到处百度然后出来的一些答非所问的答案 。 1: ...

architect刘源源 ⋅ 05/07 ⋅ 0

个人项目中前端(js+jquery)遇到的问题汇总

个人项目中前端(JavaScript+Jquery)遇到的问题汇总 前言 在使用js和jquery的时候主要导入对应的js文件。 01.JavaScript 01.1.doument.form_name.相关 1>.doument.formname.ok.value:获取表...

meiqi0538 ⋅ 04/19 ⋅ 0

JavaScript 编程精解 中文第三版 零、前言

零、前言 原文:Introduction 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 部分参考了《JavaScript 编程精解(第 2 版)》 We think we are creating the system for our own purp...

ApacheCN_飞龙 ⋅ 06/01 ⋅ 0

RN与原生交互(一)——基本页面跳转

React Native(以下简称RN)开发app过程中大部分都可以在JS端完成,但是也有一些功能是需要原生端来完成的。这时RN与原生端就不可避免的需要进行交互,比如页面跳转和数据传递。本篇文章主要以...

不變旋律 ⋅ 06/13 ⋅ 0

618快要来临--家具大战一战即发

前言 今年是小程序很火的一年,所以最近在自学微信小程序,所以打算自己撸一个小程序出来,由于自己才刚刚自学不久。就做了一个相对简单的家具小程序。当然在这其中也遇到了一些问题和bug,在...

盏茶作酒 流苏如画 ⋅ 06/11 ⋅ 0

趣谈js的call和apply两大召唤术

前言 在《趣谈js的bind牌胶水》这篇文章中,我聊到了js的bind胶水,这篇文章我来聊聊js的call和apply这对孪生兄弟。 Why? ——> 为什么会出现apply和call? 在《趣谈js的bind牌胶水》中,我...

hanmin ⋅ 05/21 ⋅ 0

Deno原理详解,让我们一起从源码分析开始

Node之父ry:在“Node中的设计错误”演讲中表示: 不允许将任意本地函数绑定至 V8 当中。 所有系统调用都将通过消息传递完成(protobuf 序列化)。 两项原生函数:send 与 recv。 这既简化了...

lvgithub ⋅ 06/05 ⋅ 0

React Native 与原生模块数据通信(一)(iOS)

(一)iOS日历模块封装演示 下面开始演示如何封装一个iOS日历原生模块,让JavaScript可以进行访问到iOS平台日历的功能。 在React Native中,原生模块就是一个Objective-C类,该实现了RCTBridge...

manofit ⋅ 05/24 ⋅ 0

Form在某些浏览器中自动向本页面提交并“刷新”

今天在码js时遇到一个神奇的Bug 就是这么一个简单的form提交,在Chrome上可以完美运行,表单提交成功后跳转到其他页面。但是在FireFox、Safari浏览器上总是会再次跳转到自己页面,而查看数据...

皇家马德里主教练齐达内 ⋅ 04/28 ⋅ 0

JS实现HTML静态页传值的方法

JS实现HTML静态页传值的方法 作者:前端开发-武方博 发布:2012-10-29 分类:javascript 阅读:8,735次 此处使用JS方式实现静态页之间值传递,其实很简单,废话不多说,见代码,先看index.h...

thinkyoung ⋅ 2015/06/01 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

浅谈设计模式之工厂模式

工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 在工厂模式中,我们在创建对象时不会对客户端暴露创建逻...

佛系程序猿灬 ⋅ 29分钟前 ⋅ 0

Dockerfile基础命令总结

FROM 指定使用的基础base image FROM scratch # 制作base image ,不使用任何基础imageFROM centos # 使用base imageFROM ubuntu:14.04 尽量使用官方的base image,为了安全 LABEL 描述作...

ExtreU ⋅ 昨天 ⋅ 0

存储,对比私有云和公有云的不同

导读 说起公共存储,很难不与后网络公司时代的选择性外包联系起来,但尽管如此,它还是具备着简单和固有的可用性。公共存储的名字听起来也缺乏专有性,很像是把东西直接堆放在那里而不会得到...

问题终结者 ⋅ 昨天 ⋅ 0

C++难点解析之const修饰符

C++难点解析之const修饰符 c++ 相比于其他编程语言,可能是最为难掌握,概念最为复杂的。结合自己平时的C++使用经验,这里将会列举出一些常见的难点并给出相应的解释。 const修饰符 const在c...

jackie8tao ⋅ 昨天 ⋅ 0

聊聊spring cloud netflix的HystrixCommands

序 本文主要研究一下spring cloud netflix的HystrixCommands。 maven <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-clo......

go4it ⋅ 昨天 ⋅ 0

Confluence 6 从其他备份中恢复数据

一般来说,Confluence 数据库可以从 Administration Console 或者 Confluence Setup Wizard 中进行恢复。 如果你在恢复压缩的 XML 备份的时候遇到了问题,你还是可以对整个站点进行恢复的,如...

honeymose ⋅ 昨天 ⋅ 0

myeclipse10 快速搭建spring boot开发环境(入门)

1.创建一个maven的web项目 注意上面标红的部分记得选上 2.创建的maven目录结构,有缺失的目录可以自己建立目录补充 补充后 这时候一个maven的web项目创建完成 3.配置pom.xml配置文件 <proje...

小海bug ⋅ 昨天 ⋅ 0

nginx.conf

=========================================================================== nginx.conf =========================================================================== user nobody; #......

A__17 ⋅ 昨天 ⋅ 0

645. Set Mismatch - LeetCode

Question 645. Set Mismatch Solution 思路: 遍历每个数字,然后将其应该出现的位置上的数字变为其相反数,这样如果我们再变为其相反数之前已经成负数了,说明该数字是重复数,将其将入结果r...

yysue ⋅ 昨天 ⋅ 0

Python这么强?红包杀手、消息撤回也可以无视,手机App辅助!

论述 标题也许有点不好理解,其实就是一款利用Python实现的可以监控微信APP内的红包与消息撤回的助手。不得不说,这确实是一款大家钟意的神器。 消息撤回是一件很让人恶心的事,毕竟人都是有...

Python燕大侠 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部