文档章节

详解js界面跳转与值传递

码农般的学良
 码农般的学良
发布于 2016/11/23 11:16
字数 674
阅读 1
收藏 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
通州
jeecg3.5中实现从一个页面跳转到另一个页面

实现以下效果 点"跳转到demo"后直接跳转到demo示例,并且带上查询条件,如下: 由于jeecg使用的是easyui,所以不能直接用类似于<a href="xxxx.do?xxx">这样的方式来跳转了,但还是有办法做到...

z_jordon
2015/04/25
0
0
详解location.href几种用法的区别

一:提出问题 使用js的同学一定知道js的location.href的作用是什么,但是在js中关于location.href的用法究竟有哪几种,究竟有哪些区别,估计很多人都不知道了。 blog已经迁移到这里了,有更多...

phping
2013/03/04
0
5
JS页面跳转后,返回到该页面时,该页面的全局变量的值是怎么变化的?

前奏 window.location.reload();history.back(-1);history.go(1);多种页面刷新跳转详解 问题 JS页面跳转后,返回到该页面时,该页面的全局变量的值是怎么变化的? 待续…………...

666B
2015/03/16
0
0
iOS与JS交互之WKWebView-协议拦截

级别:★★☆☆☆ 标签:「iOS与JS交互」「WKWebView与JS交互」「WKWebView拦截协议」 作者: Xs·H 审校: QiShare团队 先解释下标题:“iOS与JS交互”。iOS指原生代码(文章只有示例),J...

QiShare
09/01
0
0
jquery mobile 页面跳转方法

如果使用JavaScript代码切换当前显示的页面,可以调用jQuery Mobile中的changePage()方法。该方法可以设置跳转页面的URL地址、跳转时的动画效果和需要携带的数据,接下来通过一个简单的实例详...

李佳顺
2013/05/22
0
3

没有更多内容

加载失败,请刷新页面

加载更多

io流

码农屌丝
33分钟前
0
0
SpringBoot基础篇之重名Bean的解决与多实例选择

更多Spring文章,欢迎点击 一灰灰Blog-Spring专题 当通过接口的方式注入Bean时,如果有多个子类的bean存在时,具体哪个bean会被注入呢?系统中能否存在两个重名的bean呢?如果可以,那么怎么...

小灰灰Blog
43分钟前
0
0
记录一次dubbo项目实战

一、案例说明 存在2个系统,A系统和B系统,A系统调用B系统的接口获取数据,用于查询用户列表。 二、环境搭建 安装zookeeper,解压(zookeeper-3.4.8.tar.gz)得到如下: 然后进入conf将zoo_s...

Java烂猪皮
47分钟前
0
0
拜托,别再问怎么深入学习分布式架构了!

由于分布式系统所涉及到的领域众多,知识庞杂,很多新人在最初往往找不到头绪,不知道从何处下手来一步步学习分布式架构。 本文试图通过一个最简单的、常用的分布式系统,来阐述分布式系统中...

Java架构资源分享
48分钟前
0
0
《netty入门与实战》笔记-05:心跳与空闲检测

本小节,我们一起探讨最后一个话题:心跳与空闲检测 首先,我们来看一下,客户端与服务端之间的网络会存在什么问题? 1. 网络问题 下图是网络应用程序普遍会遇到的一个问题:连接假死 连接假...

Funcy1122
54分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部