react-Native、UIWebView与Native交互

最近一直在学习前端的内容，这里总结一下js在不同载体的情况下与原生的交互。

react-Native调用原生

原生需要导入#import 框架，并且遵守RCTBridgeModule协议

在实现里面导出模块(不添加参数即默认为这个类名)

RCT_EXPORT_MODULE();

然后需要导出方法

// 导出方法，桥接到js的方法返回值类型必须是void
RCT_EXPORT_METHOD(doSomething:(NSString *)testStr) {
  NSLog(@"%@ ===> doSomething",testStr);

}

带有回调的方法这么处理

/* 回调参数至少为两个，第一个为状态，第二个为参数 */
RCT_EXPORT_METHOD( doSomething1:(NSString *)testStr callBack:(RCTResponseSenderBlock)callback ){

  NSLog(@"%@ ===> doSomething",testStr);
  NSString *str1 = @"Callback数据"; //准备回调回去的数据
  NSString *str2 = @"Callback数据222";
  callback(@[[NSNull null],str1,str2]);
}

在react-native这么调用方法

 //NativeAndRNBridge为原生定义的导出模块
 var NativeTest = require('react-native').NativeModules.NativeAndRNBridge;
 NativeTest.doSomething1(('RN->原生的数据'),(error,str1,str2) => {
     if (!error) {
         alert(str1+"========"+str2)//返回的数据
      } else {
         console.warn(error);
      }
 });

Native调用UIWebView

UIWebView与Native交互时需要获取JSContext，JSContext是JavaScriptCore里面的一个类
首先你需要定义一个属性

@property(nonatomic,strong)JSContext *context;

在网页加载完成的这个代理方法里面通过KVC获取context

- (void)webViewDidFinishLoad:(UIWebView *)webView{

    [self hidenChrysanthemum];
    self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    //设置异常处理
    self.context.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
        context.exception = exceptionValue;
    };

    self.context[@"HrefLinkTaobao"] = ^(NSString * url){

        dispatch_async(dispatch_get_main_queue(), ^{
              //dosomething
        });
    };

    self.context[@"HrefLinkLocal"] = ^(NSString * url){

        dispatch_async(dispatch_get_main_queue(), ^{
               //dosomething
        });
    };

    self.context[@"native"] = self;
}

这里有一些注意点：

1、这里是有循环应用的问题，如果在方法的block中执行一些代码，用到了self需要对self进行weak操作一下。
2、线程的问题，调用web的方法都是异步线程去调取的，所以回到原生的里面，做一些操作（非耗时）的时候最好是转到主线程里面来