React-Native 橋接iOS原生開(kāi)發(fā)詳解
react-native的文檔的原生模塊中可以看到清洗的代碼 傳送門(mén)
接下來(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 <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
#import <React/RCTUIManager.h>
@interface GaoMapManager : NSObject<RCTBridgeModule>
@end
// 類(lèi)的.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端的類(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)致崩潰
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 關(guān)于React Native使用axios進(jìn)行網(wǎng)絡(luò)請(qǐng)求的方法
- 詳解React Native與IOS端之間的交互
- iOS端React Native差異化增量更新的實(shí)現(xiàn)方法
- React Native中NavigatorIOS組件的簡(jiǎn)單使用詳解
- react-native組件中NavigatorIOS和ListView結(jié)合使用的方法
- ios原生和react-native各種交互的示例代碼
- React Native第三方平臺(tái)分享的實(shí)例（Android，IOS雙平臺(tái)）
- React Native 集成 iOS 原生功能(打印機(jī)功能為例)
相關(guān)文章
這篇文章主要為大家介紹了React DnD如何處理拖拽示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
ReactNative實(shí)現(xiàn)Toast的示例
這篇文章主要介紹了ReactNative實(shí)現(xiàn)Toast的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
react實(shí)現(xiàn)Radio組件的示例代碼
這篇文章主要介紹了react實(shí)現(xiàn)Radio組件的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
react組件封裝input框的防抖處理的項(xiàng)目實(shí)現(xiàn)
本文主要介紹了react組件封裝input框的防抖處理的項(xiàng)目實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
lazy是React提供的懶（動(dòng)態(tài)）加載組件的方法，React.lazy()，路由組件代碼會(huì)被分開(kāi)打包，能減少打包體積、延遲加載首屏不需要渲染的組件，依賴內(nèi)置組件Suspense標(biāo)簽的fallback屬性，給lazy加上loading指示器組件，Suspense目前只和lazy配合實(shí)現(xiàn)組件等待加載指示器的功能2023-03-03
react16+antd4 RangePicker組件實(shí)現(xiàn)時(shí)間禁選示例
這篇文章主要為大家介紹了react16+antd4 RangePicker 時(shí)間禁選示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
react中使用forEach或map兩種方式遍歷數(shù)組
這篇文章主要介紹了react中使用forEach或map兩種方式遍歷數(shù)組，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
React組件設(shè)計(jì)模式之組合組件應(yīng)用實(shí)例分析
這篇文章主要介紹了React組件設(shè)計(jì)模式之組合組件,結(jié)合實(shí)例形式分析了React組件設(shè)計(jì)模式中組合組件相關(guān)概念、原理、應(yīng)用場(chǎng)景與操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
本篇文章主要介紹了webpack3+React 的配置全解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
詳解如何優(yōu)雅地在React項(xiàng)目中使用Redux
這篇文章主要介紹了詳解如何優(yōu)雅地在React項(xiàng)目中使用Redux，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12