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(参数)即可。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiangzhihong8

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值