在ReactNative下进行开发时如果有调用原生模块时,因为无法直接调试和输出日志,经常会感觉很麻烦。所以我们采用曲线救国的方式,从原生接口发送事件到JS端来进行控制台日志打印。在其他的第三方开源组件下一样可以直接使用事件发送接口,JS端的代码只需要在程序的启动时注册一次事件监听接口,而无需在每个组件里注册。
1. JS端建立事件监听接口
为防止重复创建,可以在添加前先执行移除操作。
参数1是事件的类型编码,要和原生接口的eventName一致。参数2为接收到事件的回调接口。
DeviceEventEmitter.removeListener('uploadservice', this.eventHandler);
DeviceEventEmitter.addListener('uploadservice', this.eventHandler);
事件的处理回调接口,可以在message里设置子类型用于处理不同的事件
eventHandler = (message) => {
let type = message['type'];
if (type == 'crm.uploadservice.action.PHOTO') {
.....
} else if (type == 'nativelog') {
// 此类型用于实现原生接口的打印日志的功能
console.log(new Date().toTimeString() + ':' + JSON.stringify(message));
}
}
2. 在原生代码里添加事件发送接口
通用的事件发送接口,参数eventName要和JS端事件类型一致
/**
* 发送事件到JS端
*
* @param reactContext
* @param eventName
* 事件类型名称
* @param params
* 传递的事件参数, map格式
*/
public static void sendEvent(ReactContext reactContext, String eventName, WritableMap params) {
if (reactContext != null) {
reactContext.getJSModule(RCTDeviceEventEmitter.class).emit(eventName, params);
}
}
日志输出实例,日志内容为键值对数据,其中子类型须为”nativelog”,
{
WritableMap map = new WritableNativeMap();
map.putString("type", "nativelog"); // 事件子类型
map.putString("value", value); // 日志内容
sendEvent(mContext, "uploadservice", map);
}