亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間:2018年01月17日 09:08:55   作者:一天清晨  
本篇文章主要介紹了React-Native 橋接iOS原生開發(fā)詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

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


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

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

RN中寫法

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

import { NativeModules } from 'react-native';

export default NativeModules.GaoMapManager;

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

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

findNodeHandle引入方式

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

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

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

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

高德導航的一些坑

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

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

相關文章

  • 一文詳解React Redux設計思想與工作原理

    一文詳解React Redux設計思想與工作原理

    最近看項目中使用了?Redux,?便嘗試了解一波?Redux?的設計思想與工作原理,所以本文詳細的給大家介紹了Redux設計思想與工作原理,需要的朋友可以參考下
    2023-09-09
  • Input標簽自動校驗功能去除實現(xiàn)

    Input標簽自動校驗功能去除實現(xiàn)

    這篇文章主要為大家介紹了Input標簽的自動拼寫檢查功能去除實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-07-07
  • React如何使用sortablejs實現(xiàn)拖拽排序

    React如何使用sortablejs實現(xiàn)拖拽排序

    這篇文章主要介紹了React如何使用sortablejs實現(xiàn)拖拽排序問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • 使用store來優(yōu)化React組件的方法

    使用store來優(yōu)化React組件的方法

    這篇文章主要介紹了使用store來優(yōu)化React組件的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • React BootStrap用戶體驗框架快速上手

    React BootStrap用戶體驗框架快速上手

    這篇文章主要介紹了React BootStrap用戶體驗框架快速上手的相關知識,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2018-03-03
  • React18的useEffect執(zhí)行兩次如何應對

    React18的useEffect執(zhí)行兩次如何應對

    這篇文章主要給大家介紹了關于React18的useEffect執(zhí)行兩次如何應對的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用React具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-07-07
  • React?Hook中的useState函數(shù)的詳細解析

    React?Hook中的useState函數(shù)的詳細解析

    Hook 就是 JavaScript 函數(shù),這個函數(shù)可以幫助你鉤入(hook into) React State以及生命周期等特性,這篇文章主要介紹了React?Hook?useState函數(shù)的詳細解析的相關資料,需要的朋友可以參考下
    2022-10-10
  • React使用Electron開發(fā)桌面端的詳細流程步驟

    React使用Electron開發(fā)桌面端的詳細流程步驟

    React是一個流行的JavaScript庫,用于構(gòu)建Web應用程序,結(jié)合Electron框架,可以輕松地將React應用程序打包為桌面應用程序,本文詳細介紹了使用React和Electron開發(fā)桌面應用程序的步驟,需要的朋友可以參考下
    2023-06-06
  • react-router-domV6版本改版踩坑記錄

    react-router-domV6版本改版踩坑記錄

    這篇文章主要介紹了react-router-domV6版本改版踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • React?Fiber構(gòu)建completeWork源碼解析

    React?Fiber構(gòu)建completeWork源碼解析

    這篇文章主要為大家介紹了React?Fiber構(gòu)建completeWork源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-02-02

最新評論