文档章节

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 移动开发入门与实战

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

gitchat
2017/12/01
0
0
Android混合开发

前端周刊第 52 期:JS Conf 2017 开始报名、苹果腾讯开战、React Native 周边 哈哈,互联网圈本周的大事件是微信公众号关闭 iOS 平台打赏入口,讨论这件事情的文章很多,前端周刊就没有收录相...

掘金官方
2017/12/14
0
0
React Native第3天——常用组件和常见Q&A

我(web+android开发经验)学习React Native过程中接触的知识点和学习的线路图。 React Native第1天——环境配置及知识体系(http://my.oschina.net/addcn/blog/647290) 掌握环境配置及运行h...

addcn
2016/03/30
210
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

nginx模块学习六 add_header 跨域访问

语法 Syntax: add_header name value [always];Default: --Context:http,server,location,if in location 例:/etc/nginx/conf.d/default.conf server {    listen       80; ......

Romanceling
今天
0
0
SpringBoot初探

#SpringBoot初探 三种创建SpringBoot项目的方式: 第一种:使用IDEA创建maven项目,选择maven-archetype-quickstart; 第二种:使用IDEA创建Spring Initializer,选择web组件; 第三种:使用...

向码而生
今天
2
0
IO

JAVA中IO技术:BIO、NIO、AIO 1、同步异步、阻塞非阻塞概念 同步和异步是针对应用程序和内核的交互而言的。 阻塞和非阻塞是针对于进程在访问数据的时候,根据IO操作的就绪状态来采取的不同方...

DemonsI
今天
0
0
org.apache.commons 常用工具类

一. org.apache.commons.io.IOUtils closeQuietly 关闭一个IO流、socket、或者selector且不抛出异常。通常放在finally块。 toString 转换IO流、 Uri、 byte[]为String。 copy IO流数据复制,...

sprouting
今天
0
0
linux使用Inotify监控目录或者文件状态变更

基本概念: Inotify 是一个 Linux特性,它监控文件系统操作,比如读取、写入和创建。Inotify 反应灵敏,用法非常简单,并且比 cron 任务的繁忙轮询高效得多。 需求: 1.有一个文件采集进程,...

mickelfeng
今天
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部