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

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

react-native的文檔的原生模塊中可以看到清洗的代碼

接下來先說一下筆者的要實(shí)現(xiàn)的功能:

在iOS原生代碼中集成高德導(dǎo)航,在RN中用JS去調(diào)用原聲代碼,并進(jìn)行跳轉(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端的類文件的代碼.當(dāng)然繼承高德地圖是需要在AppDelegate.m文件中注冊(cè)高德apiKey(如果地圖不顯示,Xcode中會(huì)顯示錯(cuò)誤,apikey不生效需要10分鐘之后生效且一個(gè)key對(duì)應(yīng)一個(gè)app,否者會(huì)出錯(cuò))

RN中寫法

看到這大家如果認(rèn)真看了上面的代碼,會(huì)注意到reactTag這個(gè)參數(shù),在JS中怎么傳這個(gè)參數(shù)呢,又代表著什么意思
其實(shí)很簡(jiǎn)單

import { NativeModules } from 'react-native';

export default NativeModules.GaoMapManager;

這是筆者寫的一個(gè)untils的CommoniOSUtils.JS文件.調(diào)用的時(shí)候直接用文件名調(diào)用iOS原生的方法名即可

// findNodeHandle(this.homeHead)就是對(duì)應(yīng)的reactTag參數(shù)的值
 CommoniOSUtils.pushViewControllerXYZ(findNodeHandle(this.homeHead));

findNodeHandle引入方式

import {
 findNodeHandle,
} from 'react-native';

看到這里大家應(yīng)該清楚怎么回事了.我還要啰嗦一句具體是怎么個(gè)情況(個(gè)人理解)

在RN中用findNodeHandle方法去獲取ref控件的tag值,將這個(gè)值傳入到iOS原生中,再用

利用這個(gè)tag獲取當(dāng)當(dāng)前的view,根據(jù)view獲取當(dāng)前VC,用VC去跳轉(zhuǎn)頁面且傳值使用.完成調(diào)用

高德導(dǎo)航的一些坑

1,用pod引入的是5.3.0版本,demo中確實(shí)5.5.0版本,方法少了很多,自己修改一下問題不大
2, iOS9以下會(huì)有內(nèi)存泄漏問題,導(dǎo)致崩潰

關(guān)于“React-Native中橋接iOS原生開發(fā)的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。