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 setTimeout和setInterval 的区别
Dec 08 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
js分页工具实例
Jan 28 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
Webpack之tree-starking 解析
Sep 11 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 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中运用http调用的GET和POST方法示例
2014/09/29 PHP
php使用google地图应用实例
2014/12/31 PHP
php图片上传类 附调用方法
2016/05/15 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
vue将data恢复到初始状态 && 重新渲染组件实例
2020/09/04 Javascript
python 控制语句
2011/11/03 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
Django模板Templates使用方法详解
2019/07/19 Python
django model object序列化实例
2020/03/13 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
美国美妆网站:B-Glowing
2016/10/12 全球购物
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
通信工程求职信
2014/07/16 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
初中物理教学反思
2016/02/19 职场文书
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
Nginx配置https的实现
2021/11/27 Servers
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android