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 <React/RCTEventEmitter.h>,同时NSObject<RCTBridgeModule>替换为RCTEventEmitter<RCTBridgeModule>,最终.h代码如下
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
#import <Foundation/Foundation.h>
#import <React/RCTEventEmitter.h>
@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
