React Native与iOS原生之间通讯

(从安装环境到完成调用和回调)//，文末附一些过程中遇到的问题以及解决的方法)

        以前从来没有了解过React Native相关的东西。最近需要弄一个React Native和原生互调的示例，就研究了一下。终于把程序跑通了。现在分享一下教程~（文中的代码力争简洁、清晰，不做无用的逻辑或UI，让初学者明白OC和JS通讯的思路和原理。）

        首先安装环境参考下面链接步骤，教程很详细很完整：

        https://reactnative.cn/docs/environment-setup

        安装WatchDog时总报错，措施：重复卸载安装卸载安装，直到成功。。

程序运行成功界面

        安装完成、创建好新工程并且运行成功出现上面的界面就可以继续了。

        代码我是参考了别人的文章边写边猜摸索出来的，附链接：参考代码文章，后面我会详细写出步骤，此链接可略过。

好了。代码部分正文开始：

        首先要写好OC的方法供JS调用。

        用XCode打开工程，在AppDelegate.m同目录下创建一个工具类TestTool继承NSObject，一个控制器TestController继承UIViewController。如下图所示：（TestTool类作为JS和OC通讯的桥梁，TestController是我们要调用打开的苹果原生的界面）

工具类和控制器文件

        原生控制器代码(以图片形式提供)这里不详细说明，主要就是对外提供一个回调block。控制器提供给回调的假数据为@{@"time":@"20:30",@"date":@"2018"};

TestController.h

TestController.m

最重要的是工具类TestTool

        在TestTool.h中导入头文件并遵守协议（粗体部分）：

#import  

#import

#import

@interface TestTool : NSObject

@end

        在TestTool.m中的@implementation和@end之间加一个宏定义

RCT_EXPORT_MODULE(TestTool);

        接下来开始写供JS调用的方法，其中testToolFeedback为方法名，可根据需求修改。

RCT_REMAP_METHOD(testToolFeedback, resolver:(RCTPromiseResolveBlock)resolver recter:(RCTPromiseRejectBlock)reject) { 

    dispatch_async(dispatch_get_main_queue(), ^{//有UI操作，所以要回到主线程

        RCTLogInfo(@"%@",NSThread.currentThread);

        UIViewController *controller = (UIViewController *)[[[UIApplication sharedApplication] keyWindow] rootViewController];//获取RN界面控制器办法

        TestController *mainController = [[TestController alloc] init];

        mainController.getResultFromOCController = ^(NSDictionary *resultDic) {//控制器回调

            [self.navController dismissViewControllerAnimated:YES completion:^{

                    if (resultDic) {

                        resolver(resultDic);

                    } else {

                        NSError * err = [NSError errorWithDomain:@"test" code:0 userInfo:nil];

                        reject(@"0",@"cancel",err);

                    }

            }];   

        };

        self.navController = [[UINavigationController alloc] initWithRootViewController:mainController];

        [controller presentViewController:self.navController animated:YES completion:nil];

    });

}

        至此，OC部分的代码就已经完成了。

        现在开始写JS调用OC的方法。

        改JS界面要找到项目中的App.js：

App.js

        使用最简单的办法，界面上放一个Button，点击事件里调用OC方法弹出控制器。

        首先要导入Button，位置如下图所示。

导入Button

        然后在下图所示方法所示位置写Button。

Button点击事件

        在点击事件中调用原生的方法，首先要导入NativeModules，位置如下图所示。

导入NativeModules

        然后在刚刚写好的点击事件中写如下代码。其中TestTool是工具类名，testToolFeedback是TestTool.m中提供给JS调用的方法名。

        NativeModules.TestTool.testToolFeedback().then((datas)=> {

            console.warn('data', datas);

        }).catch((err)=> {

            console.warn('err', err);

        });

        Ctrl + S保存之后。就可以使用XCode运行了！下面附运行效果图

运行效果

---

Hello, RN World!