React-Native中桥接iOS原生开发的示例分析-创新互联

这篇文章将为大家详细讲解有关React-Native中桥接iOS原生开发的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

从事服务器托管，服务器租用，云主机，虚拟主机，空间域名，CDN，网络代维等服务。

react-native的文档的原生模块中可以看到清洗的代码

React-Native中桥接iOS原生开发的示例分析

接下来先说一下笔者的要实现的功能:

在iOS原生代码中集成高德导航,在RN中用JS去调用原声代码,并进行跳转,

接下来是笔者遇到的问题与不好理解的地方,写出来跟大家分享让大家少走弯路.

刚开始也是一头雾水且查资料也是到处都是但是都没有解决问题.

iOS原生写法

在iOS中创建类继承NSObject(OC语言).

//类的.h文件
#import 
#import 
#import 
#import 

@interface GaoMapManager : NSObject

@end
// 类的.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端的类文件的代码.当然继承高德地图是需要在AppDelegate.m文件中注册高德apiKey(如果地图不显示,Xcode中会显示错误,apikey不生效需要10分钟之后生效且一个key对应一个app,否者会出错)

RN中写法

看到这大家如果认真看了上面的代码,会注意到reactTag这个参数,在JS中怎么传这个参数呢,又代表着什么意思
其实很简单

import { NativeModules } from 'react-native';

export default NativeModules.GaoMapManager;

这是笔者写的一个untils的CommoniOSUtils.JS文件.调用的时候直接用文件名调用iOS原生的方法名即可

// findNodeHandle(this.homeHead)就是对应的reactTag参数的值
 CommoniOSUtils.pushViewControllerXYZ(findNodeHandle(this.homeHead));

findNodeHandle引入方式

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

看到这里大家应该清楚怎么回事了.我还要啰嗦一句具体是怎么个情况(个人理解)

在RN中用findNodeHandle方法去获取ref控件的tag值,将这个值传入到iOS原生中,再用

利用这个tag获取当当前的view,根据view获取当前VC,用VC去跳转页面且传值使用.完成调用

高德导航的一些坑

1,用pod引入的是5.3.0版本,demo中确实5.5.0版本,方法少了很多,自己修改一下问题不大
2, iOS9以下会有内存泄漏问题,导致崩溃

关于“React-Native中桥接iOS原生开发的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网页标题：React-Native中桥接iOS原生开发的示例分析-创新互联
链接地址：http://kswsj.cn/article/dpshcs.html

关于创新互联

React-Native中桥接iOS原生开发的示例分析-创新互联

其他资讯