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 相关文章推荐
jquery中get和post的简单实例
Feb 04 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
vue2.0获取自定义属性的值
Mar 28 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
iscroll实现下拉刷新功能
Jul 18 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
vue键盘事件点击事件加native操作
Jul 27 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
根德YB400的电路分析
2021/03/02 无线电
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
JavaScript更改class和id的方法
2008/10/10 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
python实战串口助手_解决8串口多个发送的问题
2019/06/12 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
python实现无边框进度条的实例代码
2020/12/30 Python
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
成品仓管员岗位职责
2013/12/11 职场文书
怀念母亲教学反思
2014/04/28 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
小平小道观后感
2015/06/09 职场文书
小组组名及励志口号
2015/12/24 职场文书