文档章节

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
Android混合开发

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

掘金官方
2017/12/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Ubuntu 安装ssh服务以及开启root用户ssh登录

一、安装ssh服务 安装ssh服务 sudo apt-get update sudo apt-get install openssh-server 安装完成后启动ssh服务 sudo service ssh start 二、开启root用户ssh登录 解决root远程ssh不能登录,...

15834278076
3分钟前
0
0
AndroidRX

1.延时并切换回主线程执行 Observable.just(true).delay(2, TimeUnit.SECONDS) .observeOn(AndroidSchedulers.mainThread()) .subscribe(new Consumer<Boolean>() { [@Override](https://my.......

我是菜鸟我骄傲
31分钟前
0
0
申请Let's Encrypt永久免费SSL证书

环境安装 1、安装git yum install git-core 2、安装python 系统自带 不用安装 只要版本大于2.7即可。 获取Let's Encrypt免费SSL证书 先停止nginx 在阿里云安全组里加入 443端口的入规则 git ...

HGMrWang
39分钟前
1
0
如何使用playframework进行更好的开发

1: 自定义基类Controller 相信刚开始使用Play的人写的Controller 都继承于 play.mvc.Controller , 但这并不是一个很好的选择,自建基类Controller可以扩展更多的功能。 1.1 验证功能。 后台...

tuerqidi
44分钟前
5
0
《JavaScript高级程序设计(第3版)》阅读笔记

第6章 面向对象的程序设计 6.2 创建对象 6.2.1 工厂模式 JavaScript创建对象(一)—— 工厂模式 6.2.2 构造函数模式 JavaScript创建对象(二)——构造函数模式 6.2.3 原型模式 JavaScript...

Bob2100
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部