react-native中ListView组件点击跳转的方法示例


Posted in Javascript onSeptember 30, 2017

前言

在 上一篇 我们实现了NavigatorIOS与ListView结合使用的方法,那么这篇文章介绍一下ListView里点击跳转到新视图的方法,话不多说了,来一起看看详细的介绍吧。

先看效果

react-native中ListView组件点击跳转的方法示例

用法

NewsList.js

_onPress(rowData) {
 this.props.navigator.push({
 title: rowData,
 component: CNodeJSList,
 passProps: {
 name: rowData,
 }
 })
}

说明

  • 使用 this.props.navigator.push() 指定component 就可以跳转到下一个视图里了,如果想传值,可以用 passProps 属性,在下一个视图里使用 this.props.name 接收就可以了
  • 对于onPress里方法的调用,如果是以onPress={this._onPress}调用 _onPress方法,页面是不跳转的,需要绑定this,写法是:onPress={this._onPress.bind(this)} 但这样好像没法传值,所以要传值需要这样写:onPress={()=>{this._onPress(rowData)}} ,这样就没问题了,页面也可以跳转成功了

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

参考

ListView列表点击跳转

源码:https://github.com/tomoya92/ITNews-React-Native

Javascript 相关文章推荐
浅析javascript闭包 实例分析
Dec 25 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
解决layui-open关闭自身窗口的问题
Sep 10 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
解决vue-loader加载不上的问题
Oct 21 Javascript
JS如何监听div的resize事件详解
Dec 03 Javascript
HTML+JS实现在线朗读器
Feb 15 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 #Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 #Javascript
vue按需引入element Transfer 穿梭框
Sep 30 #Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 #Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 #jQuery
JS设计模式之数据访问对象模式的实例讲解
Sep 30 #Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 #Javascript
You might like
PHP insert语法详解
2008/06/07 PHP
一个php Mysql类 可以参考学习熟悉下
2009/06/21 PHP
php模板函数 正则实现代码
2012/10/15 PHP
探讨捕获php错误信息方法的详解
2013/06/09 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
jquery 日期分离成年月日的代码
2010/05/14 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
python中的一些类型转换函数小结
2013/02/10 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
python截取两个单词之间的内容方法
2018/12/25 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
暑期政治学习心得体会
2014/09/02 职场文书
超市开店计划书
2014/09/15 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
现场施工员岗位职责
2015/04/11 职场文书
交通事故起诉书
2015/05/19 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android
Python字符串格式化方式
2022/04/07 Python
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript
Redis Lua脚本实现ip限流示例
2022/07/15 Redis