react-native: ios原生调用js方法

JavaScript021

react-native: ios原生调用js方法,第1张

ReactEventEmit.h

#import <React/RCTEventEmitter.h>

#import <React/RCTBridgeModule.h>

@interface ReactEventEmit : RCTEventEmitter<RCTBridgeModule>

-(void)goToCashier:(NSString*) result

@end

ReactEventEmit.m

#import "ReactEventEmit.h"

@implementation ReactEventEmit

@synthesize bridge = _bridge

RCT_EXPORT_MODULE(ReactEventEmit)

+ (id)allocWithZone:(NSZone*)zone {

    staticReactEventEmit*sharedInstance =nil

    staticdispatch_once_tonceToken

    dispatch_once(&onceToken, ^{

        sharedInstance = [superallocWithZone:zone]

    })

    returnsharedInstance

}

-(NSArray *)supportedEvents{

    return @[@"goToCashier"]

}

-(void)goToCashier:(NSString*) result

{

    NSLog(@"======== cashierSuccess ========== %@",result)

    [self sendEventWithName:@"goToCashier" body:@{@"result": result}]

}

@end

RN的module初始化是由RN内部实现的，所以我们调用这个实例的时候，必须是这样子：

ReactEventEmit *emit = [ReactEventEmit allocWithZone:nil]

 [emit goToCashier:@"fail"]

JS端调用：

const ReactEventEmit = NativeModules.ReactEventEmit

const myReactEventEmit = new NativeEventEmitter(ReactEventEmit)

this.listener = myReactEventEmit.addListener('goToCashier', (data: { result: string }) =>{

        console.warn('====== cashierSuccess ======= ' + JSON.stringify(data))

        this.process(data.result)

      })

React Native在Android混编项目中的页面跳转和方法调用大致可以通过上面这张简图来描述下：

RN通信原理简单地讲就是，一方native（java）将其部分方法注册成一个映射表，另一方（js）再在这个映射表中查找并调用相应的方法，而Bridge担当两者间桥接的角色。

其实方法调用大致分为2种情况：

RN调用Android需要module名和方法名相同，而Android调用RN只需要方法名相同。

（1）RCTDeviceEventEmitter 事件方式

​ 优点：可任意时刻传递，Native主导控制。

（2）Callback 回调方式

​ 优点：JS调用，Native返回。

​ 缺点：CallBack为异步操作，返回时机不确定

（3）Promise

​ 优点：JS调用，Native返回。

​ 缺点：每次使用需要JS调用一次

（4）直传常量数据（原生向RN）

​ 跨域传值，只能从原生端向RN端传递。RN端可通过 NativeModules.[module名].[参数名] 的方式获取。

注意： RN层调用NativeModule层进行界面跳转时，需要设置FLAG_ACTIVITY_NEW_TASK标志。

例如下分别以 原生调用RN 和 RN调用原生 为例简单描述下：

需要添加facebook的两个图片加载库：(注意版本号尽量与你使用的RN版本内部使用的fresco版本保持一直)

https://github.com/crazycodeboy/RNStudyNotes/tree/master/React%20Native%E5%8E%9F%E7%94%9F%E6%A8%A1%E5%9D%97%E5%90%91JS%E4%BC%A0%E9%80%92%E6%95%B0%E6%8D%AE%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E5%BC%8F

有时需要在native和js之间传递数据，有以下几种方式

Callback是最常用的设计模式之一。无论是java，oc，c#，还是js等都会看到Callback的身影；

native支持Callback类型的参数，该Callback对应js中的function。

Promises是es6的一个新的特性，在rn中非常重要。native也支持Promise。

native支持以事件的方式向js发送数据，像Android中的广播，iOS中的通知中心；接收方注册接收该事件即可接收到native发送的事件。