Illegal callback invocation from native module. This callback type only permits a single invocation from native code.
因為最近在做TCP和UDP相關(guān)的App,雖然網(wǎng)上有react-native-smartconfig, react-native-udp和react-native-tcp,但是我用起來感覺非常不好用,于是就自己寫React Native相關(guān)的模塊锐借，并且調(diào)試也方便,同時也避免了第三方庫所帶來的坑揉燃。
但是我想多次回調(diào)數(shù)據(jù)時卻發(fā)現(xiàn)每次控制臺都會出現(xiàn)以下錯誤,不管我使用Promises和Callback都是如此
Illegal callback invocation from native module. This callback type only permits a single invocation from native code.
于是我Google,Baidu并且Stackoverflow也查找了,最終發(fā)現(xiàn)是關(guān)于內(nèi)存的原因https://github.com/facebook/react-native/issues/6300
因為React Native為了節(jié)省內(nèi)存,當(dāng)調(diào)用Promises或者Callback一次之后,React Native就立即釋放掉了,所以他僅僅只能調(diào)用一次. 但是我們有其他需求的時候,比如藍(lán)牙掃描, 做過藍(lán)牙方面應(yīng)用的應(yīng)該都知道,當(dāng)用戶掃描設(shè)備時,并不是一次性的將周圍藍(lán)牙設(shè)備返回,因此這個時候我們就需要多次回調(diào)數(shù)據(jù)。
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:
當(dāng)Native Module出現(xiàn)多次數(shù)據(jù)回調(diào)時净当，我們可以使用RCTEventEmitter來注冊事件,然后通知到JavaScript
Java中使用的方法
/**
*
* @param eventName 事件的名稱
* @param obj 對應(yīng)的Value
*/
public void sendEventToJs(String eventName,Object obj){
getReactApplicationContext().getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName,obj);
}
Object-C的實現(xiàn)方法(Object-C中步驟較多)
(1). 在自定義模塊.h文件中導(dǎo)入#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支持的事件名稱,然后就可以再想使用的方法中調(diào)用sendEventWithName來發(fā)送事件和對應(yīng)的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的實現(xiàn)方法
目前還沒用過React Native + Swift,如果有需要的可以幫助研究,畢竟我學(xué)IOS也是從Swift開始的
React Native實現(xiàn)方法
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
* 當(dāng)我們不使用了或者退出當(dāng)前界面時，我們需要移除監(jiān)聽
*/
componentWillUnmount(){
subscription.remove();
}
上面就是全部的使用經(jīng)過,如果有不同意見或者問題歡迎追問
關(guān)于原生模塊的更多信息:
(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
