React Native移动开发实战-3-实现页面间的数据传递
来源:互联网 发布:淘宝女模拍摄技巧 编辑:程序博客网 时间:2024/05/23 14:04
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获取navigatorif (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移动开发实战》
阅读全文
0 0
- React Native移动开发实战-3-实现页面间的数据传递
- 中奖名单 -《React Native移动开发实战》
- React Native 移动开发入门与实战
- React Native移动开发实战-1-React Native的JSX解决方案
- 号外,号外,《React Native移动开发实战》出版啦
- React Native移动开发实战-4-Android平台的适配原理
- React Native移动开发实战-5-Android平台的调试技巧
- React Native 基础篇之Navigator页面的跳转与数据的传递
- React Native移动开发实战-2-如何调试React Native项目
- iOS开发实现页面间的数据传递
- react-native 页面切换的实现
- Android 实战开发 页面跳转数据传递
- React Native开发移动客户端
- Android中通过React Native的Navigator实现场景跳转及数据传递
- react native使用react-navigation跳转后多页面数据传递总结
- 【React Native实战教程】GitHub Trending API数据的获取
- react-native ListView 通过Navigator传递数据
- 3、React Native实战——实现QQ的登录界面
- vbs 转码 gb2312转换为UTF-8编码的函数
- HDOJ1009 贪心水题
- JS高程6.面向对象的程序设计(1)理解对象
- BZOJ 3527 力(FFT)
- 常用SQL
- React Native移动开发实战-3-实现页面间的数据传递
- Linux exec与重定向
- UVA
- DrawerLayout1
- HDU_6140 Hybrid Crystals 【思维】
- 学生调错(二)
- Process SDK RTOS Creating a SD Card with Windows
- 多层神经网络BP算法 原理及推导
- 在应用中界面,点击或双击状态栏区域,返回页面顶部