(从安装环境到完成调用和回调)//，文末附一些过程中遇到的问题以及解决的方法)
以前从来没有了解过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"};
最重要的是工具类TestTool
在TestTool.h中导入头文件并遵守协议（粗体部分）：
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
@interface TestTool : NSObject <RCTBridgeModule>
@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：
使用最简单的办法，界面上放一个Button，点击事件里调用OC方法弹出控制器。
首先要导入Button，位置如下图所示。
然后在下图所示方法所示位置写Button。
在点击事件中调用原生的方法，首先要导入NativeModules，位置如下图所示。
然后在刚刚写好的点击事件中写如下代码。其中TestTool是工具类名，testToolFeedback是TestTool.m中提供给JS调用的方法名。
NativeModules.TestTool.testToolFeedback().then((datas)=> {
console.warn('data', datas);
}).catch((err)=> {
console.warn('err', err);
});
Ctrl + S保存之后。就可以使用XCode运行了！下面附运行效果图
