(從安裝環(huán)境到完成調(diào)用和回調(diào))//盘寡，文末附一些過(guò)程中遇到的問(wèn)題以及解決的方法)
????????以前從來(lái)沒(méi)有了解過(guò)React Native相關(guān)的東西。最近需要弄一個(gè)React Native和原生互調(diào)的示例，就研究了一下常潮。終于把程序跑通了〉苷停現(xiàn)在分享一下教程~（文中的代碼力爭(zhēng)簡(jiǎn)潔、清晰，不做無(wú)用的邏輯或UI孵户，讓初學(xué)者明白OC和JS通訊的思路和原理萧朝。）
????????首先安裝環(huán)境參考下面鏈接步驟，教程很詳細(xì)很完整：
????????https://reactnative.cn/docs/environment-setup
????????安裝WatchDog時(shí)總報(bào)錯(cuò)夏哭，措施：重復(fù)卸載安裝卸載安裝检柬，直到成功。竖配。
????????安裝完成何址、創(chuàng)建好新工程并且運(yùn)行成功出現(xiàn)上面的界面就可以繼續(xù)了。
????????代碼我是參考了別人的文章邊寫(xiě)邊猜摸索出來(lái)的进胯，附鏈接：參考代碼文章用爪，后面我會(huì)詳細(xì)寫(xiě)出步驟，此鏈接可略過(guò)胁镐。
好了偎血。代碼部分正文開(kāi)始：
????????首先要寫(xiě)好OC的方法供JS調(diào)用。
????????用XCode打開(kāi)工程盯漂，在AppDelegate.m同目錄下創(chuàng)建一個(gè)工具類TestTool繼承NSObject颇玷，一個(gè)控制器TestController繼承UIViewController。如下圖所示：（TestTool類作為JS和OC通訊的橋梁宠能，TestController是我們要調(diào)用打開(kāi)的蘋(píng)果原生的界面）
? ? ? ? 原生控制器代碼(以圖片形式提供)這里不詳細(xì)說(shuō)明亚隙，主要就是對(duì)外提供一個(gè)回調(diào)block磁餐⌒莅控制器提供給回調(diào)的假數(shù)據(jù)為@{@"time":@"20:30",@"date":@"2018"};
最重要的是工具類TestTool
????????在TestTool.h中導(dǎo)入頭文件并遵守協(xié)議（粗體部分）：
#import <Foundation/Foundation.h>?
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
@interface TestTool : NSObject <RCTBridgeModule>
@end
????????在TestTool.m中的@implementation和@end之間加一個(gè)宏定義
RCT_EXPORT_MODULE(TestTool);
????????接下來(lái)開(kāi)始寫(xiě)供JS調(diào)用的方法锹淌，其中testToolFeedback為方法名，可根據(jù)需求修改。
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) {//控制器回調(diào)
????????????[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部分的代碼就已經(jīng)完成了缕棵。
????????現(xiàn)在開(kāi)始寫(xiě)JS調(diào)用OC的方法识椰。
????????改JS界面要找到項(xiàng)目中的App.js：
? ? ? ? 使用最簡(jiǎn)單的辦法，界面上放一個(gè)Button鄙漏，點(diǎn)擊事件里調(diào)用OC方法彈出控制器嗤谚。
? ? ? ? 首先要導(dǎo)入Button，位置如下圖所示怔蚌。
????????然后在下圖所示方法所示位置寫(xiě)B(tài)utton巩步。
? ? ? ? 在點(diǎn)擊事件中調(diào)用原生的方法，首先要導(dǎo)入NativeModules桦踊，位置如下圖所示椅野。
????????然后在剛剛寫(xiě)好的點(diǎn)擊事件中寫(xiě)如下代碼。其中TestTool是工具類名，testToolFeedback是TestTool.m中提供給JS調(diào)用的方法名竟闪。
????????NativeModules.TestTool.testToolFeedback().then((datas)=> {
????????????console.warn('data', datas);
????????}).catch((err)=> {
????????????console.warn('err', err);
????????});
????????Ctrl + S保存之后离福。就可以使用XCode運(yùn)行了！下面附運(yùn)行效果圖
