react-native的触摸事件应该如何动态生成?

使用RN开发APP,按照一般的思路,比如我们在动态生成一个文章列表,然后当用户点击(TouchableHighlight)文章标题的时候,需要显示文章详情,此时需要在生成的每个列表上添加一个触摸事件,类似如下:

一行标题:
class Title extends Component{

  _onPress(){
    Alert.alert(‘test‘,‘test‘);
  }

  render(){
    return(
      <TouchableHighlight onPress={() => this.onPress() } >
          <Text>{this.props.name}</Text>
      </TouchableHighlight>
    )
  }

}

标题列表循环显示:
 {
     article_array.map( (name)=>( <Title name={name}  />  ) )
 }

当是当我们在模拟器上刷新的时候,此时并没有触发标题点击事件,但是却会弹出N个Alert对话框,那么我们就感到奇怪了,这个触摸事件为何为自动触发呢?

此时,不妨我们换一种写法,把要触发的方法,传递到要生成的组件中,作为组件的一个属性去调用,而不是把触发方法,写到子组件内部。

一个标题:
class Title extends Component{

  render(){
    return(
      <TouchableHighlight onPress={() => this.props.onPress() } >
          <Text>{this.props.name}</Text>
      </TouchableHighlight>
    )
  }

}

标题列表循环显示:

export default class NewTest extends Component { 

   _onPress(){
    Alert.alert(‘test‘,‘test‘);
    }

  render(){

   {
     article_array.map( (name)=>( <Title name={name} onPress={this._onPress}  />  ) )
   }}

这回,我们在刷新的时候,发现正常了。

假如要动态生成的组件列表中包含事件,那么要把事件处理方法,当成组件属性,传递过来。

时间: 2024-10-10 14:10:58

react-native的触摸事件应该如何动态生成?的相关文章

react native点击事件传递参数

比如我们定义一个TouchableOpacity点击事件,该方法需要接收一个参数值,如下 _gotoSubClass(sectionID, rowID) { console.log("sectionID="+sectionID + "rowID=" + rowID); } 那么在TouchableOption组件的onPress属性中应该这样写: <TouchableOpacity onPress={() => this._gotoSubClass(se

React Native(十一)&mdash;&mdash;删除事件以及刷新列表

需求:删除列表中的某一项,但不刷新整个页面,底下的数据顺势而上(第一张是原始数据,第二张是删除掉"你会介今年"这条动态后显示的数据). 中间的过程比较曲折,只因为刚开始的时候自己只想着实现功能,却没考虑到适应之前版本原有的效果,于是就有了三个版本的实现方法: let listdata = await deldata(item.id);//请求删除接口返回的数据 let list = this.state.list;//原有列表数据 let newlist = new Array();/

React Native入门-实战解析(上)

来自Leo的原创博客,转载请著名出处 我的stackoverflow 概述 随着app端越来越复杂,迭代越来越快,很多app采用原生+html5的方式来实现,然后不知道什么时候,它就有了个高大上的名字 - hybrid app.类似的框架也很多,比较有名的有 Ionic PhoneGap 这种app的原理是,用webview来实现类似原生的界面,也就是用h5写的代码是运行在webview里的.优点很明显 动态部署(不需要每次通过应用商店的审核,尤其是iOS,审核有时候真的觉得两颗蛋不够疼的.)

React Native 调研报告

Facebook三月份开源了React Native iOS平台的框架,让移动开发人员和web开发者都各自兴奋了一把:native的移动开发者想的比较多的估计是Facebook的那句:"learn once, write everywhere",而web开发者兴奋的估计是,不需要学习iOS那陌生的OC或者swift语言,用自己熟悉的javascript语言就可以开发原生的移动APP了.那么新推出的react native 能否承载的了两大阵营的开发者的期待了.本人及同事对react n

【React Native开发】React Native移植原生Android项目

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50519677 本文出自:[江清清的博客] (一)前言 [好消息]个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org 前三节课程我们已经对于React Native For Android的环境搭建,IDE安装配置以及应用运行,调试相关的知识点做了讲解.今天我们来讲一个非常有用的知识点.移植我们已有

我的 React Native 技能树点亮计划 の Javascript 模块管理器 npm

@author ASCE1885的 Github 简书 微博 CSDN 知乎 本文由于潜在的商业目的,不开放全文转载许可,谢谢! npm,全称是 node package manager,顾名思义最开始是作为 Node 的包管理器存在的.不过经过不断的发展和壮大,现在的 npm 早就不再局限于 Node 的范畴,已经成为 Javascript 的包管理器,看看下面的 npm 官网首页介绍就知道了: 本系列教程假设你已经按照 React Native 官方入门指南安装好相关的环境(尤其是 Node

React Native之code-push的热更新(ios android)

React Native之code-push的热更新(ios android) React Native支持大家用React Native技术开发APP,并打包生成一个APP.在动态更新方面React Native只是提供了动态更新的基础,对将应用部署到哪里,如何进行动态更新并没有支持的那么完善.好在微软开发了CodePush,填补React Native 应用在动态更新方面的空白.CodePush 是微软提供的一套用于热更新 React Native 和 Cordova 应用的服务.下面将向大

React Native 初学-环境搭配

一.环境需求 1.1 .安装HomeBrew 安装方式 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 1.2.安装npm和Node.js : Node.js安装地址: https://nodejs.org/en/download/ 安装位置: Node.js was installed at /usr/local/bin/node npm was ins

JQuery不能触发动态生成的html的click事件

//错误code$( function() {         $(".addBtn").click( function() {         addNode($(this));     }).end(); }) //动态生成html function addNode(cur) {     if(cur.parent().has("ul").size() != 0) {         cur.parent().children("ul:first&qu