react-native中ListView组件点击跳转的方法示例
前言
在 上一篇我们实现了NavigatorIOS与ListView结合使用的方法,那么这篇文章介绍一下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列表点击跳转
相关推荐
-
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
在web应用中,上拉刷新加载更多,下拉刷新列表的操作非常常见,那么在React-Native中是如何实现呢,我们具体来看一下 ReactNative提供了RefreshControl下拉刷新组件,但是没有提供上拉刷新组件,上拉刷新在App中是很常用的. 今天我们来实现一个iOS和Android通用的上拉刷新功能. 下面简要介绍下我实现的思路. 思路: 1.常量定义: const moreText = "加载完毕"; //foot显示的文案 //页码 var pageNum = 1; /
-
react-native ListView下拉刷新上拉加载实现代码
本文介绍了react-native ListView下拉刷新上拉加载实现.分享给大家,具体如下: 先看效果图 下拉刷新 React Native提供了一个组件可以实现下拉刷新方法RefreshControl 使用方法 <ListView refreshControl={ <RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh.bind(this)} /> } //... </List
-
react-native组件中NavigatorIOS和ListView结合使用的方法
前言 本文主要给大家介绍了关于react-native组件中NavigatorIOS和ListView结合使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 先看效果 使用方法 index.ios.js import React, {Component} from 'react'; import { AppRegistry, NavigatorIOS } from 'react-native'; import NewsList from './components/
-
react-native中ListView组件点击跳转的方法示例
前言 在 上一篇我们实现了NavigatorIOS与ListView结合使用的方法,那么这篇文章介绍一下ListView里点击跳转到新视图的方法,话不多说了,来一起看看详细的介绍吧. 先看效果 用法 NewsList.js _onPress(rowData) { this.props.navigator.push({ title: rowData, component: CNodeJSList, passProps: { name: rowData, } }) } 说明 使用 this.prop
-
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
本文实例讲述了React Native中ScrollView组件轮播图与ListView渲染列表组件用法.分享给大家供大家参考,具体如下: 1.Scroll View ScrollView是React Native提供的滚动视图组件,渲染一组视图,用户可以进行滑动响应交互,其常用属性如下: 滚动的偏移量:通过event.nativeEvent.contentOffset.x可以得到水平偏移量. horizontal={bool},属性为true时,所有子视图在水平方向排列,否则在纵向排列.默认为
-
React Native中NavigatorIOS组件的简单使用详解
一.NavigatorIOS组件介绍 1,组件说明 使用 NavigatorIOS 我们可以实现应用的导航(路由)功能,即实现视图之间的切换和前进.后退.并且在页面上方会有个导航栏(可以隐藏). NavigatorIOS 组件本质上是对 UIKit navigation 的包装.使用 NavigatorIOS 进行路由切换,实际上就是调用 UIKit 的 navigation. NavigatorIOS 组件只支持 iOS 系统.React Native 还提供了一个 iOS 和 Android
-
React Native中导航组件react-navigation跨tab路由处理详解
前言 大家应该都有所体会,我们在一般应用都有跨tab跳转的需求, 这就需要特别处理下路由,所以 下面是使用react-navigation作为路由组件的一种方式. 具体情境是: app分三大模块Home主页, Bill账单和Me我的, 对应三个tab. 现在需求是 Home push HomeTwo, HomeTwo push BillTwo, BillTwo 返回到 Bill账单首页. 方法如下: 首先选择路由结构, 选择使用最外层是StackNavigator, 然后包含3个TabNavig
-
React Native中Navigator的使用方法示例
前言 众所周知在React Native中如何实现页面的跳转,这是一个突破点也是一个难点,想让我们的页面切换起来动起来应该是每一个初学者所追求的,那么在RN中实现这样的功能那必须要了解Navigator的用法了.Navigator是React Native自带的组件,不需要导入第三方组件,下面就来具体说明如何使用. 方法如下 首先,我们最好不要把index.ios.js和index.android.js文件写的很冗余很多代码,可以仅仅将其当做是一个工程的入口,好,废话不多说,开始上代码. 1.习
-
React Native 中限制导入某些组件和模块的方法
目录 限制使用 Touchable 限制使用 Image 同时限制两者 示例 有些时候,我们不希望使用某些组件,而是想使用其他组件.这时候,我们可以使用一个名为 no-restricted-imports 的eslint 规则,该规则允许你指定一个或多个组件的名称,以防止使用这些组件. no-restricted-imports 是 eslint 自带的一个规则,我们不需要额外引入一个插件. 限制使用 Touchable 假如我们希望小伙伴们不要使用 Touchable 系列组件,而是使用 Pr
-
react native中的聊天气泡及timer封装成的发送验证码倒计时
其实,今天我想把我近期遇到的坑都总结一下: 1.goBack的跨页面跳转,又两种方法,一可以像兔哥那样修改navigation源码,二可以用navigationActions 2.父子组件的传值,一可以用callBack 二可以用pubsub发布订阅模式 三可以用manager事件监听(a页面要显示的内容 有两种形式,一是从manager主动接收,也就是说不需要点击什么的获取数据,而是时时监听manager里数据的变化,第二种a页面获取要显示内容的形式是 点击出发,获取) 3 需要说的还是na
-
React Native悬浮按钮组件的示例代码
React Native悬浮按钮组件:react-native-action-button,纯JS组件,支持安卓和IOS双平台,支持设置子按钮,支持自定义位置和样式和图标. 效果图 安装方法 npm i react-native-action-button --save react-native link react-native-vector-icons 因为用到了react-native-vector-icons图标组件,需要做下link.如果你项目中已经使用了react-native-ve
-
React Native 中实现确认码组件示例详解
目录 正文 实现原理 开源方案 正文 确认码控件也是一个较为常见的组件了,乍一看,貌似较难实现,但实则主要是障眼法. 实现原理 上图 CodeInput 组件的 UI 结构如下: <View style={[styles.container]}> <TextInput autoFocus={true} /> <View style={[styles.cover, StyleSheet.absoluteFillObject]} pointerEvents="none&
-
React Native自定义标题栏组件的实现方法
大家好,今天讲一下如何实现自定义标题栏组件,我们都知道RN有一个优点就是可以组件化,在需要使用该组件的地方直接引用并传递一些参数就可以了,这种方式确实提高了开发效率. 标题栏是大多数应用界面必不可少的一部分,将标题栏剥离出来做成一个组件很有必要.今天先讲一个不带返回按钮的标题栏.废话少说,直接上代码: /** * 封装公共的标题头,没有返回按钮 */ 'use strict'; import React, { Component } from 'react'; import { Text, Vi
随机推荐
- Angular.js中ng-include用法及多标签页面的实现方式详解
- js Form.elements[i]的使用实例
- HTML5 实现的一个俄罗斯方块实例代码
- 如何在Windows Vista中预览PDF文件的方法
- Android中使用Kotlin实现一个简单的登录界面
- javascript继承之为什么要继承
- JavaScript的代码编写格式规范指南
- C++通过自定义函数找出一个整数数组中第二大数的方法
- 无阻塞加载js,防止因js加载不了影响页面显示的问题
- Global.asax取绝对路径的方法
- php 代码优化的42条建议 推荐
- 脚本安全的本质_PHP+MYSQL第1/3页
- python脚本设置超时机制系统时间的方法
- C#显示文件夹下所有图片文件的方法
- ie7+背景透明文字不透明超级简单的实现方法
- jQuery使用JSONP实现跨域获取数据的三种方法详解
- jQuery实现跨域iframe接口方法调用
- Node.js+ES6+dropload.js实现移动端下拉加载实例
- Windows操作系统整理 只需五步就可完美
- java springmvc乱码解决归纳整理详解