React-Native 橋接iOS原生開發(fā)詳解
react-native的文檔的原生模塊中可以看到清洗的代碼 傳送門
接下來先說一下筆者的要實現(xiàn)的功能:
在iOS原生代碼中集成高德導航,在RN中用JS去調(diào)用原聲代碼,并進行跳轉(zhuǎn),
接下來是筆者遇到的問題與不好理解的地方,寫出來跟大家分享讓大家少走彎路.
剛開始也是一頭霧水且查資料也是到處都是但是都沒有解決問題.
iOS原生寫法
在iOS中創(chuàng)建類繼承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這個參數(shù),在JS中怎么傳這個參數(shù)呢,又代表著什么意思
其實很簡單
import { NativeModules } from 'react-native'; export default NativeModules.GaoMapManager;
這是筆者寫的一個untils的CommoniOSUtils.JS文件.調(diào)用的時候直接用文件名調(diào)用iOS原生的方法名即可
// findNodeHandle(this.homeHead)就是對應的reactTag參數(shù)的值 CommoniOSUtils.pushViewControllerXYZ(findNodeHandle(this.homeHead));
findNodeHandle引入方式
import { findNodeHandle, } from 'react-native';
看到這里大家應該清楚怎么回事了.我還要啰嗦一句具體是怎么個情況(個人理解)
在RN中用findNodeHandle方法去獲取ref控件的tag值,將這個值傳入到iOS原生中,再用
利用這個tag獲取當當前的view,根據(jù)view獲取當前VC,用VC去跳轉(zhuǎn)頁面且傳值使用.完成調(diào)用
高德導航的一些坑
1,用pod引入的是5.3.0版本,demo中確實5.5.0版本,方法少了很多,自己修改一下問題不大
2, iOS9以下會有內(nèi)存泄漏問題,導致崩潰
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
React如何使用sortablejs實現(xiàn)拖拽排序
這篇文章主要介紹了React如何使用sortablejs實現(xiàn)拖拽排序問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01React18的useEffect執(zhí)行兩次如何應對
這篇文章主要給大家介紹了關于React18的useEffect執(zhí)行兩次如何應對的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用React具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07React?Hook中的useState函數(shù)的詳細解析
Hook 就是 JavaScript 函數(shù),這個函數(shù)可以幫助你鉤入(hook into) React State以及生命周期等特性,這篇文章主要介紹了React?Hook?useState函數(shù)的詳細解析的相關資料,需要的朋友可以參考下2022-10-10React使用Electron開發(fā)桌面端的詳細流程步驟
React是一個流行的JavaScript庫,用于構(gòu)建Web應用程序,結(jié)合Electron框架,可以輕松地將React應用程序打包為桌面應用程序,本文詳細介紹了使用React和Electron開發(fā)桌面應用程序的步驟,需要的朋友可以參考下2023-06-06React?Fiber構(gòu)建completeWork源碼解析
這篇文章主要為大家介紹了React?Fiber構(gòu)建completeWork源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-02-02