RCTEventEmitter使用
时间:2022-04-27
本文章向大家介绍RCTEventEmitter使用,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在0.27版本之前,RN的Native端向js端发射消息主要通过sendDeviceEventWithName的方式,相关代码如下。
@synthesize bridge = _bridge;
-(void)iseCallback:(NSString*)code result:(NSString*) result
{
[_bridge.eventDispatcher
sendDeviceEventWithName:@"iseCallback"
body:@{
@"code":code,
@"result":result,
@"index":self.bridgeIndex,
@"category":self.bridgeCategory
}];
}
然后Js端接受代码如下:
import RCTDeviceEventEmitter from 'RCTDeviceEventEmitter';
this.listener = myNativeEvt.addListener('iseCallback', this.iseCallback.bind(this));
this.listener && this.listener.remove();
使用bridge.eventDispatche拦截消息时,有三分方法需要注意。
- sendAppEventWithName
- sendDeviceEventWithName
- sendInputEventWithName 然后在JS那边也有三个对应的接收接口。
- RCTAppEventEmitter
- RCTDeviceEventEmitter
- RCTInputEventEmitter
但是在0.28版本之后,但是在Xcode一直提示这种方式可能要被取代。
'sendDeviceEventWithName:body:' is deprecated: Subclass RCTEventEmitter instead
RCTEventEmitter用法
在0.28版本之后,ios向Js端发射消息的代码如下。 1、自定义的模块类头文件要继承自RCTEventEmitter。
#import <React/RCTEventEmitter.h>
#define RNIOSExportJsToReact(noti) [[NSNotificationCenter defaultCenter] postNotificationName:@"event-emitted" object:noti];
@interface RNIOSExportJsToReact : RCTEventEmitter<RCTBridgeModule>
@end
在具体的原生代码中发送消息。
#import "RNIOSExportJsToReact.h"
@implementation RNIOSExportJsToReact
RCT_EXPORT_MODULE();
- (NSArray<NSString *> *)supportedEvents {
return @[@"SpotifyHelper"]; //这里返回的将是你要发送的消息名的数组。
}
- (void)startObserving
{
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(emitEventInternal:)
name:@"event-emitted"
object:nil];
}
- (void)stopObserving
{
[[NSNotificationCenter defaultCenter] removeObserver:self];
}
- (void)emitEventInternal:(NSNotification *)notification
{
[self sendEventWithName:@"SpotifyHelper"
body:notification.object];
}
+ (void)emitEventWithName:(NSString *)name andPayload:(NSDictionary *)payload
{
[[NSNotificationCenter defaultCenter] postNotificationName:@"event-emitted"
object:self
userInfo:payload];
}
@end
一旦RCT_EXPORT_MODULE();声明该类是EXPORT_MODULE,那么该类的实例已经创建好了。然后我们在RN端调用以下即可。
import React,{Component} from 'react';
import {
·
·
·
NativeModules,
NativeEventEmitter,
} from 'react-native';
import Main from './app/HJMain';
var nativeBridge = NativeModules.RNIOSExportJsToReact;//你的类名
const NativeModule = new NativeEventEmitter(nativeBridge);
export default class Haojia extends React.Component {
render() {
return (
<Main />
);
}
componentDidMount(){
NativeModule.addListener('SpotifyHelper',(data)=>this._getNotice(data));
}
_getNotice (body) {//body 看你传什么
this.forceUpdate();//重新渲染
}
componentWillUnmount() {
//删除监听
this.NativeModule.remove()
}
}
如果需要调用RN的方法,在OC需要的地方加上RNIOSExportJsToReact(参数)即可。
- JavaWeb10-reques;response你不得不学(2)
- 很多人比较纠结的约束和索引的关系(r7笔记第75天)
- JavaWeb09-Servlet(Java真正的全栈开发)
- JavaWeb08-XML,tomcat,HTTP轻松入门
- JavaWeb07-JDBC(Java真正的全栈开发)
- 编程思想 之「操作符」
- Hyperledger fabric Chaincode 开发详解
- 字节码文件的内部结构之谜
- 基因功能富集分析-R语言
- CRM, C4C和Hybris的工作流简介
- 想进大厂?50个多线程面试题,你会多少?(一)
- golang 几种字符串的连接方式
- Go Template学习笔记
- Go语言实现控制台贪吃蛇
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Centos编译JDK8源码
- R-tmap 绘制带指北针和比例尺的空间地图
- 升级Php Curl扩展遇到的坑
- Skywalking Php注册不上问题排查
- 接口403问题没这么容易解决
- 码云 Pages 搭建
- Meteva笔记:加载GRIB 2要素场
- crontab 指令笔记
- Shell 脚本实现串口操作
- 【CSS】714- 你所不知道的 CSS 负值技巧与细节
- SRC挖掘利器—溯光开源插件化渗透测试框架
- 【React】717- 从零实现 React-Redux
- 【Vue.js】Vue.js介绍及MVVM模式
- 【Vue.js】Vue.js基本语法
- 【JS】723- 前端如何优雅的处理类数组对象?