如何使用React Native正确地从桥接的iOS模块发出和接收事件到JavaScript?

时间:2015-09-16 20:51:10

标签: javascript objective-c facebook react-native bridge

我有一个React Native应用程序,并希望从Obj-C调度一个事件来测试应用程序事件/发射系统的工作方式。我已经阅读了所有文档,翻阅了本地回购的示例以了解示例,但仍然不知道我的代码有什么问题。

我知道我的Obj-C会触发,因为我已经逐步完成了Xcode中的代码,self.bridge.eventDispatcher不是nil。我还知道,通过控制台日志,模拟器中呈现的主要React Native组件会安装并呈现。问题是我没有看到任何这些通知的控制台输出。我可能会错误地要求ApplicationManager类,或者订阅错误的“事物”来监听事件。我可能做错了很多事情: - )

这是我的Obj-C导出模块:

@implementation ApplicationManager

RCT_EXPORT_MODULE();

@synthesize bridge = _bridge;

- (instancetype)init {
  self = [super init];
  if ( self ) {
    NSNotificationCenter * notificationCenter = [NSNotificationCenter defaultCenter];
    [notificationCenter addObserver:self selector:@selector(applicationDidEnterBackground:) name:UIApplicationDidEnterBackgroundNotification object:nil];
    [notificationCenter addObserver:self selector:@selector(applicationWillEnterForeground:) name:UIApplicationWillEnterForegroundNotification object:nil];
    [notificationCenter addObserver:self selector:@selector(applicationDidFinishLaunching:) name:UIApplicationDidFinishLaunchingNotification object:nil];
    [notificationCenter addObserver:self selector:@selector(applicationDidBecomeActive:) name:UIApplicationDidBecomeActiveNotification object:nil];
    [notificationCenter addObserver:self selector:@selector(applicationWillResignActive:) name:UIApplicationWillResignActiveNotification object:nil];
    [notificationCenter addObserver:self selector:@selector(applicationDidReceiveMemoryWarning:) name:UIApplicationDidReceiveMemoryWarningNotification object:nil];
  }

  return self;
}

- (void)dealloc {
  [[NSNotificationCenter defaultCenter] removeObserver:self];
}

- (void)applicationDidEnterBackground:(NSNotification *)notification {
  [self dispatchAppEventWithName:@"ApplicationDidEnterBackground" body:nil];
}

- (void)applicationWillEnterForeground:(NSNotification *)notification {
  [self dispatchAppEventWithName:@"ApplicationWillEnterBackground" body:nil];
}

- (void)applicationDidFinishLaunching:(NSNotification *)notification {
  [self dispatchAppEventWithName:@"ApplicationDidFinishLaunching" body:nil];
}

- (void)applicationDidBecomeActive:(NSNotification *)notification {
  [self dispatchAppEventWithName:@"ApplicationDidBecomeActive" body:nil];
}

- (void)applicationWillResignActive:(NSNotification *)notification {
  [self dispatchAppEventWithName:@"ApplicationWillResignActive" body:nil];
}

- (void)applicationDidReceiveMemoryWarning:(NSNotification *)notification {
  [self dispatchAppEventWithName:@"ApplicationDidReceiveMemoryWarning" body:nil];
}

- (void)dispatchAppEventWithName:(NSString *)name body:(NSDictionary *)body {
  [self.bridge.eventDispatcher sendAppEventWithName:name body:body];
}

@end

我知道这些事件和通知已在RCTAppState中提供,但我正在努力推出一个解决方案来学习:

https://github.com/facebook/react-native/blob/2f6e7336cb96bf14d47554ae0db1836075ea809e/React/Modules/RCTAppState.m

我尝试过使用两者:

[self.bridge.eventDispatcher sendAppEventWithName:name body:body];

[self.bridge.eventDispatcher sendDeviceEventWithName:name body:body];

没有任何成功。除了用于JavaScript方面的调度事件的收件人类之外,我不确定这两种方法之间的区别。

以下是相关的React Native代码:

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TabBarIOS,
  NativeAppEventEmitter,
} = React;

// ... other code omitted for brevity ... 

componentDidMount: function() {
    console.log("main component didMount");
    debugger;
    NativeAppEventEmitter.addListener("ApplicationDidFinishLaunching", (reminder) => { console.log("app event emitter: ApplicationDidFinishLaunching:", reminder)} );
 },

调试器行在Chrome调试器中被点击,NativeAppEventEmitter不是undefined,而是:

NativeAppEventEmitter
EventEmitter {_subscriber: EventSubscriptionVendor}_subscriber:
EventSubscriptionVendor__proto__: EventEmitter

我的猜测是我做错了什么,但我不知道是什么。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:5)

订阅活动的代码和发送活动的代码很好。

您遇到的问题是因为ApplicationDidFinishLaunching事件在您订阅该事件的componentDidMount之前被触发。