react-native的文檔的原生模塊中可以看到清洗的代碼 傳送門
接下來先說一下筆者的要實現的功能:
在iOS原生代碼中集成高德導航,在RN中用JS去調用原聲代碼,并進行跳轉,
接下來是筆者遇到的問題與不好理解的地方,寫出來跟大家分享讓大家少走彎路.
剛開始也是一頭霧水且查資料也是到處都是但是都沒有解決問題.
iOS原生寫法
在iOS中創建類繼承NSObject(OC語言).
//類的.h文件#import <Foundation/Foundation.h>#import <React/RCTBridgeModule.h>#import <React/RCTLog.h>#import <React/RCTUIManager.h>@interface GaoMapManager : NSObject<RCTBridgeModule>@end// 類的.m文件#import "GaoMapManager.h"#import <AMapNaviKit/AMapNaviKit.h>#import <UIKit/UIKit.h>#import "GPSNaviViewController.h"@implementation GaoMapManager@synthesize bridge = _bridge;RCT_EXPORT_MODULE();RCT_EXPORT_METHOD( pushViewControllerXYZ:(nonnull NSNumber *)reactTag ){ RCTUIManager *uiManager = _bridge.uiManager; GPSNaviViewController *gps = [[GPSNaviViewController alloc] init]; dispatch_async(uiManager.methodQueue, ^{ [uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *,UIView *> *viewRegistry) { UIView * view = viewRegistry[reactTag]; UIViewController *vc = (UIViewController *)view.reactViewController; [vc presentViewController:gps animated:YES completion:^{ }]; }]; });}以上是全部iOS端的類文件的代碼.當然繼承高德地圖是需要在AppDelegate.m文件中注冊高德apiKey(如果地圖不顯示,Xcode中會顯示錯誤,apikey不生效需要10分鐘之后生效且一個key對應一個app,否者會出錯)
RN中寫法
看到這大家如果認真看了上面的代碼,會注意到reactTag這個參數,在JS中怎么傳這個參數呢,又代表著什么意思
其實很簡單
import { NativeModules } from 'react-native';export default NativeModules.GaoMapManager;這是筆者寫的一個untils的CommoniOSUtils.JS文件.調用的時候直接用文件名調用iOS原生的方法名即可
// findNodeHandle(this.homeHead)就是對應的reactTag參數的值 CommoniOSUtils.pushViewControllerXYZ(findNodeHandle(this.homeHead));
findNodeHandle引入方式
import { findNodeHandle,} from 'react-native';看到這里大家應該清楚怎么回事了.我還要啰嗦一句具體是怎么個情況(個人理解)
在RN中用findNodeHandle方法去獲取ref控件的tag值,將這個值傳入到iOS原生中,再用
利用這個tag獲取當當前的view,根據view獲取當前VC,用VC去跳轉頁面且傳值使用.完成調用
高德導航的一些坑
1,用pod引入的是5.3.0版本,demo中確實5.5.0版本,方法少了很多,自己修改一下問題不大
2, iOS9以下會有內存泄漏問題,導致崩潰
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
