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 兼容firefox的一些问题
May 21 Javascript
Jquery插件之多图片异步上传
Oct 20 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
Ajax实现局部刷新的方法实例
Mar 31 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
PHP4引用文件语句的对比
2006/10/09 PHP
在Windows版的PHP中使用ADO
2006/10/09 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
jquery分页对象使用示例
2014/04/01 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
Python多线程扫描端口代码示例
2018/02/09 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
前台接待的工作职责
2013/11/21 职场文书
班委竞选演讲稿
2014/04/28 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
Mysql数据库group by原理详解
2022/07/07 MySQL