苦逼前端

iOS平台native调用React Native functions

Javascript2015-12-09 18:28

上一篇介绍了react native调用native functions,其中提到的js调用oc函数的时候,传递一个回调函数进去,其实已经实现了oc调用js,只不过这种方法官方给出了一个Warning:This section is more experimental than others because we don't have a solid set of best practices around callbacks yes.

官方还提供了另外一种通过事件来通信的方式:
分别创建NativeCallReact.h和NativeCallReact.m两个文件:

#import "RCTBridgeModule.h"
#import "RCTBridge.h"
#import "RCTEventDispatcher.h"
@interface NativeCallReact: NSObject <RCTBridgeModule>
@end
#import "NativeCallReact.h"
@implementation NativeCallReact
@synthesize bridge = _bridge;
RCT_EXPORT_MODULE()
RCT_EXPORT_METHOD(sendEvents){
    [self.bridge.eventDispatcher sendAppEventWithName:@"hello" body:@"i am from native"];
}
@end

在js中监听这个事件:

import {
    NativeModules,
    NativeAppEventEmitter
} from 'react-native';

//监听上面oc中定义好的事件
NativeAppEventEmitter.addListener('hello', (event) => {
    console.log(event);
});
//触发oc中发射事件的方法
NativeModules.NativeCallReact.sendEvents();
//将打印 i am from native

这样就变相实现了native调用react native中定义的方法了,官方也有提到:
这样做的好处:不需要在oc中拿到js中的函数就可以执行
但同时带来的坏处:
1.事件是在哪里都可以发送的,这样会让你代码的依赖关系不明确
2.所有的事件是在同一个命名空间下的,不小心会遇到命名冲突等问题,并且很难debug
3.如果模块在多处被使用,并且要区分使用方法,那么你可能需要在传递的参数中带一些标识,这给项目的后期维护也带来了困难

另外android平台native和react native的相互调用,可以看这里

评论(2)
  • 183.202.53.*: ??4年前
  • 101.95.128.*: 请问self.bridge.eventDispatcher sendEvent:<#(id<RCTEvent>)#>这个方法参数怎么传呢? sendAppWventWithName:这个方法已经停用了3年9个月前
还可输入200个字