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对象的property和prototype是这样一种关系
Mar 24 Javascript
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
json数据的列循环示例
Sep 06 Javascript
jquery $.fn $.fx是什么意思有什么用
Nov 04 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
Vue组件之单向数据流的解决方法
Nov 10 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 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 setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
two.js之实现动画效果示例
2017/11/06 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
Europcar德国:全球汽车租赁领域的领导者
2018/08/15 全球购物
学院领导推荐信
2013/10/30 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
红色影片观后感
2015/06/18 职场文书
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers