腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

React-Native 橋接iOS原生開發(fā)詳解

更新時間：2018年01月17日 09:08:55 作者：一天清晨

本篇文章主要介紹了React-Native 橋接iOS原生開發(fā)詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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文件中注冊高德apiKey(如果地圖不顯示,Xcode中會顯示錯誤,apikey不生效需要10分鐘之后生效且一個key對應(yīng)一個app,否者會出錯)

RN中寫法

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

import { NativeModules } from 'react-native';

export default NativeModules.GaoMapManager;

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

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

findNodeHandle引入方式

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

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

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

利用這個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以下會有內(nèi)存泄漏問題,導(dǎo)致崩潰

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React-Native 橋接iOS原生開發(fā)詳解

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具