React-Native中橋接iOS原生開發的示例分析

這篇文章將為大家詳細講解有關React-Native中橋接iOS原生開發的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

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以下會有內存泄漏問題,導致崩潰

關于“React-Native中橋接iOS原生開發的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。