React Native移动开发实战-3-实现页面间的数据传递
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移动开发实战》
React Native移动开发实战-3-实现页面间的数据传递的更多相关文章
- <React Native移动开发实战>-1-React Native的JSX解决方案
JSX并不是一门新的开发语言,而是Facebook提出的语法方案:一种可以在JavaScript代码中直接书写HTML标签的语法糖,所以,JSX本质上还是JavaScript语言. 小知识:语法糖(S ...
- React Native移动开发实战-5-Android平台的调试技巧
Android平台的调试和其他平台的调试也很类似,例如:在Android Studio打开的工程中,打开源码MainActivity.java,然后,将鼠标移至代码编辑区的左侧后,单击鼠标即可添加断点 ...
- React Native移动开发实战-4-Android平台的适配原理
打开Android开发工具Android Studio,选择菜单 Open an existing AndroidStudio project,打开ch04项目的android文件夹,如图5.8所示. ...
- React Native移动开发实战-2-如何调试React Native项目
在实际开发中,还有一个影响开发效率的重要因素:调试. 在1.4.3节中已经介绍了Enable Live Debugger的使用.本节来介绍另一个非常重要的调试选项:Debug JSRemotely选项 ...
- React Native 混合开发与实现
关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 随着 React 的盛行,其移动开发框架 React Native 也收到了广大开发者的青睐,以下简 ...
- 一、React Native 搭建开发环境(1)(Mac OS - IOS项目篇)
React Native是Facebook推出的一个开发IOS和安卓APP的技术.至于更多的详情,这里不再描述,大家可以自行百度它的定义. 原因:由于我想在一台电脑上同时开发IOS和Android两个 ...
- react-native —— 在Windows下搭建React Native Android开发环境
在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环 ...
- react-native —— 在Mac上配置React Native Android开发环境排坑总结
配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ S ...
- taro之React Native 端开发研究
初步结论:如果想把 React Native 集成到现有的原生项目中,不能使用taro的React Native 端开发功能(目前来说不能实现,以后再观察). RN开发有2种模式: 1.一是原生A ...
随机推荐
- PhotoSwipe-一个好用的图片放大缩小插件
通过GitHub 下载PhotoSwipe https://github.com/dimsemenov/PhotoSwipe 相关的库 <link rel="stylesheet&qu ...
- TensorFlow安装-Windows
参考:https://blog.csdn.net/dou3516/article/details/77836459 一.安装环境 TensorFlow即可以支持CPU,也可以支持CPU+GPU.前者的 ...
- python操作数据库(Mysql)
原文地址:https://www.cnblogs.com/R-bear/p/7022231.html python DB-API介绍 1.python标准数据库接口为 python DB-API,py ...
- Oracle 数据库纯dos代码操作
1. 安装成功后进入DOS界面操作 在进行以下操作时,需启动Oracle服务. A.进入sql界面:开始--运行--cmd:输入sqlplus 回车 提示输入正确的用户名和密码 B.开始—>所有 ...
- iPhone将NSString转换编码集为gb2312或者gbk的方法
很多时候软件读取的中文网页编码集是gb2312,所以显示出来的是乱码.这时需要将NSString文字编码转换.你可以试试以下代码 NSURL *url = [NSURL URLWithString:u ...
- html5复习--canvas
一.简介 <canvas>是html5新增的标签,可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至 ...
- 【 腾讯敏捷转型No.4 】为什么敏捷团队不要超过15人
早期,腾讯公司的架构是比较简单的.从上至下分别是:公司——商业单元(BU)——部门——组——员工,每个部门基本上就是负责一个大的产品,每个组都是按照专业进行分工和管理,例如:产品组.终端组.后台组.设 ...
- linux学习第十七天(NFS、AUTOFS文件共享配置,DNS配置)
一.NFS(网络文件系统,实现linux系统上文件共享) 服务器配置 yum install nfs-utils (安装NFS软件包) iptables -F (清空防火墙) service ip ...
- 使用Jquery Viewer 展示图片信息
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" ...
- MAC上安装GCC失败
问题 在用brew安装GCC时, 报了如下错误. ➜ ~ brew install gcc ==> Installing dependencies for gcc: isl, mpfr and ...