总结react native 事件机制

React 事件机制

一个组件的所有事件会使用统一的事件监听器,绑定到组件的最外层,那么如何使用?

  1. bind方法,绑定并且可以传递参数

     <TouchableOpacity
     onPress={this.fun.bind(this)}
     onPress={this.fun.bind(this,"text")}
     >
     </TouchableOpacity>
    
     fun(){
    
     }
    
  2. 如果不用传参数?
双冒号语法
{::this.fun}
  1. 在构造器内bind,好处是只绑定一次
    constructor(props){
        super(props);
        this.state={}
        this.fun=this.fun.bind(this)
    }
    <Text onPress={this.fun}></Text>
  1. 箭头函数 会自动绑定this
1. <Text onPress={this.fun}></Text>
   const fun=(e)=>{
       console.log(e)
   }
2. <Text onPress={()=>this.fun()}></Text>
   fun(){

   }
时间: 2024-11-05 23:25:43

总结react native 事件机制的相关文章

React Native通信机制详解

本文转载至 http://blog.cnbang.net/tech/2698/?from=groupmessage&isappinstalled=1 React Native是facebook刚开源的框架,可以用javascript直接开发原生APP,先不说这个框架后续是否能得到大众认可,单从源码来说,这个框架源码里有非常多的设计思想和实现方式值得学习,本篇先来看看它最基础的JavaScript-ObjectC通信机制(以下简称JS/OC). 概览 React Native用iOS自带的Java

[技术博客]react native事件监听、与原生通信——实现对通知消息的响应

在react native中会涉及到很多页面之间的参数传递问题.静态的参数传递通常利用组件的Props属性,在初始化组件时即可从父组件中将参数传递到子组件中.对于非父子关系的组件来说,无法直接传递参数,此时可能会用到react-navigation来传递:此外,若要将异步函数.不可预料的事件执行等得到的参数用于页面刷新时,前述的方法都不太奏效. DeviceEventEmitter react-native中采用了DeviceEventEmitter来实现对事件的监听,实现非父子关系的页面之间的

react native 刷新机制----通知

在项目中,不知道大家有没有遇到这样的一个问题,比如说有两个页面A,B.A页面中有某个按钮点击后可以跳转到B页面,现在有一个需求就是,我在B页面中做了某些操作,然后点击回退按钮,回到A页面,A页面中的数据也需要刷新过来.嗯,如果是做过android开发的朋友一定会知道,解决这样的需求的方法有很多,比如可以使用activity的生命周期,也可以使用广播等等,但是如果在react native中呢?? 我们看一下官网可以知道,react native的生命周期不是针对于页面的,而是组件,什么意思呢?也

react native js 与 native 的通信与交互方式

JS 的启动过程 React Native 的 iOS 端代码是直接从 Xcode IDE 里启动的.在启动时,首先要对代码进行编译,不出意外,在编译后会弹出一个命令行窗口,这个窗口就是通过 Node.js 启动的 development server . 问题是这个命令行是怎么启动起来的呢?实际上,Xcode 在 Build Phase 的最后一个阶段对此做了配置,其实就是增加了一个 sh 脚本,让小葱的在编译会自动去执行这个脚本,打开 npm,相当于你直接手动命令行切到 react-nati

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 从入门到原理一 React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却寥寥无几. 本文分为两个部分:上半部分用通俗的语言解释了相关的名词,重点介绍 React Native 出现的背景和试图解决的问题.适合新手对 React Native 形成初步了解. 下半部分则通过源码(0.27 版本)分析 React Native 的工作原理,适合深入学习理解 React Na

React Native资料

React Native 环境搭建 React Native 配置和起步 Sublime Text 3 搭建 React.js 开发环境 集成 ReactNative集成到已有工程中-IOS React Native集成到现有项目(非cocoa pods) 语法 ES 6入门 ES6新特性概览 React入门教程 React中文网 React Native中文网 布局 Flex布局 Flex 布局教程:语法篇 Flex 布局教程:实例篇 混编 React Native构建本地视图组件 React

React Native资料汇总

React Native 官方文档中文版翻译 http://wiki.jikexueyuan.com/project/react-native/homepage.html REACT NATIVE开发书籍http://www.reactnative.com/books/ 整理了一份React-Native学习指南 自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull requests! React-Native学习指南 本指

React—Native开发之原生模块向JavaScript发送事件

首先,由RN中文网关于原生模块(Android)的介绍可以看到,RN前端与原生模块之 间通信,主要有三种方法: (1)使用回调函数Callback,它提供了一个函数来把返回值传回给JavaScript. (2)使用Promise来实现. (3)原生模块向JavaScript发送事件. 其中,在我的博客React-Native开发之原生模块封装(Android)升级版 较为详细的阐述了如何使用回调函数Callback 来将数据传向JavaScript 端. 但是有一个比较难以解决的问题是: cal