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-实现页面间的数据传递的更多相关文章

  1. <React Native移动开发实战>-1-React Native的JSX解决方案

    JSX并不是一门新的开发语言,而是Facebook提出的语法方案:一种可以在JavaScript代码中直接书写HTML标签的语法糖,所以,JSX本质上还是JavaScript语言. 小知识:语法糖(S ...

  2. React Native移动开发实战-5-Android平台的调试技巧

    Android平台的调试和其他平台的调试也很类似,例如:在Android Studio打开的工程中,打开源码MainActivity.java,然后,将鼠标移至代码编辑区的左侧后,单击鼠标即可添加断点 ...

  3. React Native移动开发实战-4-Android平台的适配原理

    打开Android开发工具Android Studio,选择菜单 Open an existing AndroidStudio project,打开ch04项目的android文件夹,如图5.8所示. ...

  4. React Native移动开发实战-2-如何调试React Native项目

    在实际开发中,还有一个影响开发效率的重要因素:调试. 在1.4.3节中已经介绍了Enable Live Debugger的使用.本节来介绍另一个非常重要的调试选项:Debug JSRemotely选项 ...

  5. React Native 混合开发与实现

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 随着 React 的盛行,其移动开发框架 React Native 也收到了广大开发者的青睐,以下简 ...

  6. 一、React Native 搭建开发环境(1)(Mac OS - IOS项目篇)

    React Native是Facebook推出的一个开发IOS和安卓APP的技术.至于更多的详情,这里不再描述,大家可以自行百度它的定义. 原因:由于我想在一台电脑上同时开发IOS和Android两个 ...

  7. react-native —— 在Windows下搭建React Native Android开发环境

    在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环 ...

  8. react-native —— 在Mac上配置React Native Android开发环境排坑总结

    配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ S ...

  9. taro之React Native 端开发研究

    初步结论:如果想把 React Native 集成到现有的原生项目中,不能使用taro的React Native 端开发功能(目前来说不能实现,以后再观察).   RN开发有2种模式: 1.一是原生A ...

随机推荐

  1. 上手 Kubernetes

    一.Kubernetes架构 二.重要的几个概念 1.Pod:最小单元 1.1 一个Pod里可以有多个Container 1.2这些container共享这个pod的同一个网络地址,同一个文件系统,通 ...

  2. openstack排除查找错误的两种方法

    1.openstack日志一般放在什么什么位置?2.如何调试openstack命令执行过程? 我们会经常错误,但是我们碰到错误该怎么做,该如何找到原因.对于openstack有两种办法:在上一篇文章h ...

  3. bootstrap 多级下拉菜单

    如上效果: 实现代码: 导入js和css: <link rel="stylesheet" href="http://cdn.static.runoob.com/li ...

  4. struts2框架 转载 精华帖

    一.Struts2简介 参考<JavaEE 轻量级框架应用与开发—S2SH> Struts框架是流行广泛的一个MVC开源实现,而Struts2是Struts框架的新一代产品,是将Strut ...

  5. CoreText 关键性常用函数说明

    CoreText是专门进行文字绘制的函数集合 CoreText 将单个字符分为 · baseline(基线),一条假想的线,一行上的字形都以此线作为上下位置的参考,在这条线的左侧存在一个点叫做基线的原 ...

  6. node vue 开发环境部署时,外部访问页面出现: Invalid Host header 服务器域名访问出现的问题

    这是新版本 webpack-dev-server  出于安全考虑, 默认检查 hostname,如果hostname不是配置内的,将中断访问.顾仅存在于开发环境: npm run dev,打包之后不会 ...

  7. Echarts根据数据长度变换柱状图柱状的颜色

    //查询图表数据            function GetData() {                var qs = $("#qs").val();          ...

  8. Diy智能家居-1.基于esp8266的语音控制系统(开篇)

    目录Diy智能家居-1.基于esp8266的语音控制系统(开篇) https://blog.csdn.net/arno1988/article/details/82628589 Diy智能家居-2.基 ...

  9. GATK--数据预处理,质控,检测变异

    版权声明:本文源自 解螺旋的矿工, 由 XP 整理发表,共 13781 字. 转载请注明:从零开始完整学习全基因组测序(WGS)数据分析:第4节 构建WGS主流程 | Public Library o ...

  10. d3 js emberjs handlerbarjs

    http://handlebarsjs.com/ http://emberjs.com/ http://jsbin.com/d3ember-barchart/13/edit?html,output