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

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信平臺(tái)小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶(hù)創(chuàng)新互聯(lián)還提供了張家港免費(fèi)建站歡迎大家使用！

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

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

在iOS原生代碼中集成高德導(dǎo)航,在RN中用JS去調(diào)用原聲代碼,并進(jìn)行跳轉(zhuǎn),

接下來(lái)是筆者遇到的問(wèn)題與不好理解的地方,寫(xiě)出來(lái)跟大家分享讓大家少走彎路.

剛開(kāi)始也是一頭霧水且查資料也是到處都是但是都沒(méi)有解決問(wèn)題.

iOS原生寫(xiě)法

在iOS中創(chuàng)建類(lèi)繼承NSObject(OC語(yǔ)言).

//類(lèi)的.h文件
#import 
#import 
#import 
#import 

@interface GaoMapManager : NSObject

@end
// 類(lèi)的.m文件
#import "GaoMapManager.h"
#import 
#import 
#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 *viewRegistry) {
   UIView * view = viewRegistry[reactTag];
   UIViewController *vc = (UIViewController *)view.reactViewController;
   [vc presentViewController:gps animated:YES completion:^{
    
   }];
  }];
 });
}

以上是全部iOS端的類(lèi)文件的代碼.當(dāng)然繼承高德地圖是需要在AppDelegate.m文件中注冊(cè)高德apiKey(如果地圖不顯示,Xcode中會(huì)顯示錯(cuò)誤,apikey不生效需要10分鐘之后生效且一個(gè)key對(duì)應(yīng)一個(gè)app,否者會(huì)出錯(cuò))

RN中寫(xiě)法

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

import { NativeModules } from 'react-native';

export default NativeModules.GaoMapManager;

這是筆者寫(xiě)的一個(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)頁(yè)面且傳值使用.完成調(diào)用

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

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

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