在React Native Module事件监听

Illegal callback invocation from native module. This callback type only permits a single invocation from native code.

因为最近在做TCP和UDP相关的App,虽然网上有react-native-smartconfig, react-native-udp和react-native-tcp,但是我用起来感觉非常不好用,于是就自己写React Native相关的模块，并且调试也方便,同时也避免了第三方库所带来的坑。

但是我想多次回调数据时却发现每次控制台都会出现以下错误,不管我使用Promises和Callback都是如此

Illegal callback invocation from native module. This callback type only permits a single invocation from native code.

于是我Google,Baidu并且Stackoverflow也查找了,最终发现是关于内存的原因https://github.com/facebook/react-native/issues/6300

因为React Native为了节省内存,当调用Promises或者Callback一次之后,React Native就立即释放掉了,所以他仅仅只能调用一次. 但是我们有其他需求的时候,比如蓝牙扫描, 做过蓝牙方面应用的应该都知道,当用户扫描设备时,并不是一次性的将周围蓝牙设备返回,因此这个时候我们就需要多次回调数据。

Sending Events to JavaScript

因此React Native中还有一个RCTEventEmitter类:

The native module can signal events to JavaScript without being invoked directly. The preferred way to do this is to subclass RCTEventEmitter, implement supportedEvents and call self sendEventWithName:

当Native Module出现多次数据回调时，我们可以使用RCTEventEmitter来注册事件,然后通知到JavaScript

Java中使用的方法

    /**
    *
    * @param eventName 事件的名称
    * @param obj 对应的Value
    */
    public void sendEventToJs(String eventName,Object obj){
        getReactApplicationContext().getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName,obj);
    }

Object-C的实现方法(Object-C中步骤较多)

(1). 在自定义模块.h文件中导入#import ,同时NSObject替换为RCTEventEmitter,最终.h代码如下

#import 
#import 
#import 
#import 

@interface ReactNativeLoading : RCTEventEmitter<RCTBridgeModule>

@end

(2). 在自定义模块的.m文件中return支持的事件名称,然后就可以再想使用的方法中调用sendEventWithName来发送事件和对应的value,最终.m代码如下:(例子中的方法名称为loading)

#import "ReactNativeLoading.h"

@implementation ReactNativeLoading
  RCT_EXPORT_MODULE();

- (NSArray<NSString *> *)supportedEvents
{
  return @[@"EventReminder"];
}

RCT_EXPORT_METHOD(loading){

  [self sendEventWithName:@"EventReminder" body:@{@"name":@11}];
}

@end

Swift的实现方法

目前还没用过React Native + Swift,如果有需要的可以帮助研究,毕竟我学IOS也是从Swift开始的

React Native实现方法

import { NativeEventEmitter, NativeModules } from 'react-native';
const { ReactNativeLoading } = NativeModules;

const loadingManagerEmitter = new NativeEventEmitter(ReactNativeLoading);
const subscription = loadingManagerEmitter.addListener('EventReminder',(reminder) => {
    console.log(reminder)
});

/** 
 * Don't forget to unsubscribe, typically in componentWillUnmount
 * 当我们不使用了或者退出当前界面时，我们需要移除监听
 */
componentWillUnmount(){
    subscription.remove();
}

上面就是全部的使用经过,如果有不同意见或者问题欢迎追问

关于原生模块的更多信息:
(1). Android Native Modules: https://facebook.github.io/react-native/docs/native-modules-android.html
(2). IOS Native Modules: https://facebook.github.io/react-native/docs/native-modules-ios.html