NativeEventEmitter 实现 iOS 原生事件通知

在上一篇我们知道了 RN 如何结合 iOS 进行混合开发，接下来我们再增加 iOS 原生事件通知的功能，其中结合了 navigation API，不需要可以直接去掉。

1、RN

import React, {useEffect} from 'react';
import {View, Text, Button, StyleSheet} from 'react-native';
import {NativeModules, NativeEventEmitter} from 'react-native';
// 使用 NativeModules 来获取到自定义的 iOS 原生模块
// 使用 NativeEventEmitter 实现 iOS 原生事件通知

const MyModule = NativeModules.MyModule; 
// 这是我自定义的模块
let listener = null;
// 为了方便在这里直接定义，以便于后续清除副作用

const InfoScreen = ({navigation}) => {
  // 在组件挂载阶段和卸载阶段执行，监听原生事件
  useEffect(() => {
    const eventEmitter = new NativeEventEmitter(MyModule);
    listener = eventEmitter.addListener('EventReminder', result => {
      alert('获取到iOS原生事件通知' + result);
      console.log(result);
    });

    return () => {
      listener && listener.remove();
    };
  }, []);
  return (
    <View style={styles.main}>
      <Text>Info Screen</Text>
      <Button
        title="计算"
        onPress={() => {
          MyModule.squareMe('9', (err, num) => console.log(num));
          console.log(MyModule.hello);
        }}
      />
      <Button title="Go to One" onPress={() => navigation.navigate('Three')} />
    </View>
  );
};

const styles = StyleSheet.create({
  main: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default InfoScreen;

2、MyModule.h

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
#import <React/RCTConvert.h>
#import <EventKit/EventKit.h>
#import <UIKit/UIKit.h>
// 继承RCTEventEmitter
#import <React/RCTEventEmitter.h>

// NSObject 改成 RCTEventEmitter
@interface MyModule : RCTEventEmitter <RCTBridgeModule>

@end

3、MyModule.m

#import "MyModule.h"

@implementation MyModule

RCT_EXPORT_MODULE()

- (NSDictionary *)constantsToExport {
  return @{
    @"hello": @"这是我编写的第一个 iOS 原生模块！",
    @"me": @"我是谁？"
  };
}
RCT_EXPORT_METHOD(addEventMoreTwo:(NSString *)name location:(NSString *)location date:(NSString *)ISO8601DateString)
{
  NSDate *date = [RCTConvert NSDate:ISO8601DateString];
  NSLog(@"Pretending to create an event %@ at %@ at %@", name, location, date);
  RCTLogInfo(@"Pretending to create an event %@ at %@ at %@", name, location, date);
}

RCT_EXPORT_METHOD(squareMe:(NSString *)number:(RCTResponseSenderBlock)callback) {
  // 发送事件的方法
  [self sendEventWithName:@"EventReminder" body:@{@"name": number}];
  
  int num = [number intValue];
  callback(@[[NSNull null], [NSNumber numberWithInt:(num*num)]]);
}

// 注册事件名称
- (NSArray<NSString *> *)supportedEvents
{
  return @[@"EventReminder"];
}


@end