文档章节

React Native移动开发实战-3-实现页面间的数据传递

爱琴海之女妖
 爱琴海之女妖
发布于 2017/09/11 22:20
字数 473
阅读 1
收藏 0

React Native使用props来实现页面间数据传递和通信。在React Native中,有两种方式可以存储和传递数据:props(属性)以及state(状态),其中:

  • props通常是在父组件中指定的,而且一经指定,在被指定的组件的生命周期中则不再改变。
  • state通常是用于存储需要改变的数据,并且当state数据发生更新时,React Native会刷新界面。

了解了props与state的区别之后,读者应该知道,要将首页的数据传递到下一个页面,需要使用props。所以,修改home.js代码如下:

export default class home extends React.Component {
	// 这里省略了没有修改的代码

	_renderRow = (rowData, sectionID, rowID) => {
		return (
			<TouchableHighlight onPress={() => {
				const {navigator} = this.props; 			// 从props获取navigator
				if (navigator) {
					navigator.push({
						name: 'detail',
						component: Detail,
						params: {
							productTitle: rowData.title // 通过params传递props
						}
					});
				}
			}}>
				// 这里省略了没有修改的代码
			</TouchableHighlight>
		);
	}
}

在home.js中,为Navigator的push方法添加的参数params,会当做props传递到下一个页面,因此,在detail.js中可以使用this.props.productTitle来获得首页传递的数据。修改detail.js代码如下:

export default class detail extends React.Component {
	render() {
		return (
			<View style={styles.container}>
				<TouchableOpacity onPress={this._pressBackButton.bind(this)}>
					<Text style={styles.back}>返回</Text>
				</TouchableOpacity>
				<Text style={styles.text}> 
					{this.props.productTitle}
				</Text>
			</View>
		);
	}

	// 这里省略了没有修改的代码
}

重新加载应用,当再次单击商品列表时,详情页面将显示单击的商品名称,效果如图3.31所示。

 

图3.31  详情页面显示单击的商品名称

这样,一个完整的页面跳转和页面间数据传递的功能就实现了。

和我一起学吧,《React Native移动开发实战》

 

© 著作权归作者所有

共有 人打赏支持
爱琴海之女妖
粉丝 1
博文 10
码字总数 6939
作品 0
东城
私信 提问
《React Native 精解与实战》书籍连载「React Native 底层原理」

此文是我的出版书籍《React Native 精解与实战》连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战,以及 ...

Parry
08/13
0
0
《React Native 精解与实战》书籍连载「React 与 React Native 简介」

此文是我的出版书籍《React Native 精解与实战》连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战,以及 ...

Parry
08/09
0
0
React Native跨平台移动应用开发框架介绍

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m366917/article/details/61423043 好久没有来更新博客了,给大家说声抱歉,人一旦懒惰起来连自己都害怕。可能...

Aduroidpc
2017/03/11
0
0
《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」

此文是我的出版书籍《React Native 精解与实战》连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战,以及 ...

Parry
08/21
0
0
React Native 移动开发入门与实战

文章推荐 Selenium 自动化测试从零实战 原来这样做,才能向架构师靠近 Cordova App 打包全揭秘 TensorFlow on Android:物体识别 TensorFlow on Android:训练模式 图解敏捷教练和 ScrumMas...

gitchat
2017/12/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

idea 删除代码的注释

搜索栏使用 正则表达式搜索 (/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*+/|[ \t]*//.*) 会搜索出来所有注释的代码 用空格replace替换掉就可以了。 或者搜索 (/\*([^*]|[\r\n]|(\*+([^*/]|[\r\...

时刻在奔跑
5分钟前
0
0
eclipse maven 项目运行mvn clean 后无法运行

错误: 错误:找不到或无法加载主类com.yyy.test.Main 解决方法: “project” --"Clean" 参考链接:https://jingyan.baidu.com/article/cbcede07107d9802f40b4dff.html...

qimh
9分钟前
0
0
崛起于Springboot2.X之集成工作流Activiti5.22(42)

声明:该博客主要是Springboot1.X和Springboot2.X集成Activiti5.22版本,并说一下两个版本的搭建不同的地方 技术:Springboot2.0.3+mysql+jpa(自动生成25张表)+Activiti5.22 /然后Springboo...

木九天
20分钟前
3
1
windows环境下搭建rabbitMQ开发环境

windows环境下搭建rabbitMQ开发环境 下载与安装 erlang rabbitmq 是使用erlang语言开发的,所以需要erlang环境; 下载地址 rabbitmq 下载地址 rabbitmq与erlang版本关系 下载之后直接安装即可...

晨猫
31分钟前
1
0
JVM 中的守护线程

特点 通常由JVM启动 运行在后台处理任务,比如垃圾回收等 用户启动线程执行结束或者JVM结束时,会等待所有的非守护线程执行结束,但是不会因为守护线程的存在而影响关闭。 判断线程是否为守护...

小刀爱编程
34分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部