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

Posted 2023-03-22

参考技术A 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);

      );

JS调用AndroidIos原生控件

　　在上一篇博客中已经和大家聊了，关于JS与Android、Ios原生控件之间相互通信的详细代码实现，今天我们一起聊一下JS调用Android、Ios通信的相同点和不同点，以便帮助我们在进行混合式开发时，提高代码质量，实现两者在网页端代码的统一。

　　首先我们先看一下Ios调用JS的方法实现：

//无参调用
function SwiftCallJs1(){}
//有参调用
function SwiftCallJs2(name, message){}

　　紧接着我们看一下Android调用JS的方法实现：

//无参调用
function AndroidCallJs1(){}
//有参调用
function AndroidCallJs2(data){}

　　从上面的代码中你是否发现，Android与Ios调用JS时，JS处理函数两者在无参调用时是相通的。有参调用不同点是Ios是一对一直接传递，Android则是字符串传递，当然我们可以通过在Android和Ios端统一传参使用JSON格式，JS支持JSON解析，从而实现两个平台在有参方法调用上的统一。

　　看完上面的Ios与Android调用JS，下面我们看一下JS调用Android与Ios原生通信的异同点。

　　首先我们看一下JS调用Android的方法实现：

//无参调用
function callNull(){
      android.CallNull();  
}
//有参调用
function callMessage(){
      android.CallMessage("msg");
}
//有参调用--json
function callJson(){
      var json = "[{\"name\":\"满艺网\",\"url\":\"www.manyiaby.com\"}]";
      android.CallJson(json);
}    

　　接下来我们看一下JS调用Ios的方法实现：

//一：无前缀调用
//无参调用
function test1(){
      Test1();
}
//有参调用
function test2(){
      Test2("满艺网","www.manyiaby.com");
}
//二：有前缀调用
//无参调用--带返回操作结果处理
function callSystem(){
      Ios.CallSystem();
}
//操作结果处理函数
function JSCallNullIosResult(){}

//有参调用
function callWithMsg(){
      Ios.CallWithMsg("满艺网","www.manyiaby.com");
}
//有参调用--json
function callWithJson(){
     var json = "{\"name\":\"满艺网\",\"url\":\"www.manyiaby.com\"}";
     Ios.CallWithJson(json);
}
//有参调用--带返回结果处理
function callWithJsonResult(){
        var json = "{\"name\":\"满艺网\",\"url\":\"www.manyiaby.com\"}";
     Ios.CallWithJsonResult(json);
}
function JSCallJsonIosResult(data){
      alert("name:"+data["name"]);  
}

　　看到这里你一定发现了不同点，1、Android没有不带前缀的方法调用，2、Android没有方法调用后的操作结果返回处理逻辑。对于第一点，就目前我所认识到的是原生没有通过具体的实现逻辑，不过这个点不影响我们的开发，因为Ios是支持前缀方法调用的。对于第二点，我的理解是对于返回处理函数，我们可以在开发的添加上去，从而提高Ios用户的使用体验，并且处理函数不会影响到方法的调用。

　　好了到这里就和大家聊完了，当然如果所述与您的理解有偏差，还望指点一二。