在React Native iOS中监听事件 [英] Listening for events in react native ios

问题描述

我无法终生获得一个事件，无法从iOS本机正确地跨桥发送到React本机JS上下文.在Objective-C方面，我希望有一个模块可以轻松地通过网桥发送事件.我已经将此类称为EventEmitter，其定义如下:

I cannot for the life of me get an event to properly send from iOS native across the bridge to the react native JS context. On the Objective-C side I want to have a module to easily send events across the bridge. I have called this class EventEmitter and its definition is as follows:

// EventEmitter.h

#import "RCTBridge.h"
#import "RCTEventDispatcher.h"

@interface EventEmitter : NSObject<RCTBridgeModule>

  - (void)emitEvent:(NSString *) eventName withData:(id) eventData;

@end

和实现:

// EventEmitter.m

#import "EventEmitter.h"

@implementation EventEmitter

  RCT_EXPORT_MODULE();

  @synthesize bridge = _bridge;

  - (void)emitEvent:(NSString *) eventName withData:(id) eventData
  {
    NSLog( @"emitting %@ with data %@", eventName, [eventData description] );
    [[_bridge eventDispatcher] sendDeviceEventWithName:eventName body:eventData];
    [[_bridge eventDispatcher] sendAppEventWithName:eventName body:eventData];
  }

@end

我同时使用sendDeviceEvent和sendAppEvent，因为两者都不起作用.

I'm using both sendDeviceEvent and sendAppEvent because I can't get either to work.

在JS方面，我注册了一个模块的全局命名空间，以接收这些事件(以便我知道事件订阅将在事件发出之前发生).我这样注册:

On the JS side of things I register to receive these events in the global namespace of one of my modules (so that I know the event subscription will happen before the event is emitted). I register like this:

console.log( 'ADDING EVENT LISTENERS' );
NativeAppEventEmitter.addListener( 'blah', test => console.log( 'TEST1', test ) );
DeviceEventEmitter.addListener( 'blah', test => console.log( 'TEST2', test ) );

在我的日志语句中，我得到以下信息:

In my log statements I get the following:

2016-03-19 12:26:42.501 [trace][tid:com.facebook.React.JavaScript] ADDING EVENT LISTENERS
2016-03-19 12:26:43.613 [name redacted][348:38737] emitting blah with data [data redacted]

所以我可以告诉我同时发送了带有事件标记blah的应用程序事件和设备事件，并且我已经注册了DeviceEventEmitter和NativeAppEventEmitters来侦听blah事件，但没有在侦听器中被调用

So I can tell that I am sending both an app event and a device event with the tag blah and I have registered to listen for the blah event with both the DeviceEventEmitter and NativeAppEventEmitters but I'm not getting called back in the listeners.

我做错了什么?感谢您的阅读！

What am I doing wrong?? Thanks for reading!

推荐答案

我尝试调度事件，并且当您创建新的 EventEmitter 实例时，似乎未初始化 bridge 使用 [EventEmitter alloc] init]

I've tried dispatching events and it seems bridge is not initialised when you create new EventEmitter instances manually by using [EventEmitter alloc] init]

您应该让react-native创建实例.我检查了本机组件，它们正在使用-(void)setBridge:(RCTBridge *)bridge 方法进行初始化工作.请查看 RCTLinkingManager 来查看示例.它使用 NSNotificationCenter 处理事件.

You should let react-native create instances. I checked native components and they're using -(void)setBridge:(RCTBridge *)bridge method to do initialisation work. Please check out RCTLinkingManager to see an example. It's using NSNotificationCenter to handle events.

// registering for RCTOpenURLNotification evet when the module is initialised with a bridge
- (void)setBridge:(RCTBridge *)bridge
{
  _bridge = bridge;

  [[NSNotificationCenter defaultCenter] addObserver:self
                                           selector:@selector(handleOpenURLNotification:)
                                               name:RCTOpenURLNotification
                                             object:nil];
}

// emitting openURL event to javascript
- (void)handleOpenURLNotification:(NSNotification *)notification
{
  [_bridge.eventDispatcher sendDeviceEventWithName:@"openURL"
                                              body:notification.userInfo];
}

// creating RCTOpenURLNotification event to invoke handleOpenURLNotification method
+ (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)URL
  sourceApplication:(NSString *)sourceApplication
         annotation:(id)annotation
{
  NSDictionary<NSString *, id> *payload = @{@"url": URL.absoluteString};
  [[NSNotificationCenter defaultCenter] postNotificationName:RCTOpenURLNotification
                                                      object:self
                                                    userInfo:payload];
  return YES;
}

这篇关于在React Native iOS中监听事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！