首页 > 系统 > iOS > 正文

React-Native 桥接iOS原生开发详解

2019-10-21 18:42:09
字体:
来源:转载
供稿:网友

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

React-Native,桥接,iOS,React-Native桥接

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

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

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

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

iOS原生写法

在iOS中创建类继承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这个参数,在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以下会有内存泄漏问题,导致崩溃

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持VEVB武林网。


注:相关教程知识阅读请移步到IOS开发频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表