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以下会有内存泄漏问题,导致崩溃

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

您可能感兴趣的文章:

  • React-native桥接Android原生开发详解
(0)

相关推荐

  • React-native桥接Android原生开发详解

    在开发RN的漫漫长河中,早晚有那么一天要接触到安卓的原生开发,笔者来介绍一下其中的酸甜苦辣.对于一个不懂android的小白来说,刚开始有点难,不过都是万事开头难.语言是想通的,原理也是大径若一. 开发过程中是要集成高德的导航功能,没有找到好的轮子的,只要写原生代码,然后在用JS去调用原生的导航模块. 首先注册模块 其意义在与将类注册到RN中,才能用JS去调用 public class AnExampleReactPackage implements ReactPackage { @Overri

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

    react-native的文档的原生模块中可以看到清洗的代码 传送门 接下来先说一下笔者的要实现的功能: 在iOS原生代码中集成高德导航,在RN中用JS去调用原声代码,并进行跳转, 接下来是笔者遇到的问题与不好理解的地方,写出来跟大家分享让大家少走弯路. 刚开始也是一头雾水且查资料也是到处都是但是都没有解决问题. iOS原生写法 在iOS中创建类继承NSObject(OC语言). //类的.h文件 #import <Foundation/Foundation.h> #import <Re

  • React Native系列之Recyclerlistview使用详解

    目录 recyclerlistview的介绍与使用 1.安装 2.概述和功能 3. RecyclerListView的使用 1.dataProvider 2.LayoutProvider 3.rowRenderer 4.onEndReached 5.onEndReachedThreshold 6.extendedState 7.scrollViewProps RecyclerListView所有属性 recyclerlistview的介绍与使用 1.安装 npm install --save r

  • React Native 脚手架的基本使用详解

    构建项目 在相应的路径下执行命令行:react-native init 项目名 (名称不可使用连接符等特殊字符,命名可以参考APP应用名称 比如 FaceBook) react-native --v //查看版本 react-native init demo --version 0.48.0//安装指定的版本 react-native init demo --verbose --version 0.48.0 //verbose是初始化的时候显示安装详情的,安装什么模块以及进度 npm view

  • 详解React Native与IOS端之间的交互

    前置准备 首先最好了解一点关于 oc 的语法知识 1.创建声明文件nativeModule.h #import <Foundation/Foundation.h> #import <React/RCTBridgeModule.h> @interface nativeModule : NSObject <RCTBridgeModule> @end 2.创建文件nativeModule.m #import <Foundation/Foundation.h> #i

  • Flutter Module添加到iOS项目示例详解

    目录 1. 创建flutter module 2. flutter 模块嵌入原生应用 3. flutter模块和原生通信 小结 1. 创建flutter module 摘要:我们实际开发开始作为混合开发,可能会把一个模块使用flutter开发,之后嵌入到iOS项目中.比如说我们的商城模块使用flutter开发,这样android和iOS都可以使用. 我们通常会把iOS项目和 flutter module在同一目录,我们创建一个商城的module flutter create --template

  • React Context源码实现原理详解

    目录 什么是 Context Context 使用示例 createContext Context 的设计非常特别 useContext useContext 相关源码 debugger 查看调用栈 什么是 Context 目前来看 Context 是一个非常强大但是很多时候不会直接使用的 api.大多数项目不会直接使用 createContext 然后向下面传递数据,而是采用第三方库(react-redux). 想想项目中是不是经常会用到 @connect(...)(Comp) 以及 <Pro

  • react后台系统最佳实践示例详解

    目录 一.中后台系统的技术栈选型 1. 要做什么 2. 要求 3. 技术栈怎么选 二.hooks时代状态管理库的选型 context redux recoil zustand MobX 三.hooks的使用问题与解决方案 总结 一.中后台系统的技术栈选型 本文主要讲三块内容:中后台系统的技术栈选型.hooks时代状态管理库的选型以及hooks的使用问题与解决方案. 1. 要做什么 我们的目标是搭建一个适用于公司内部中后台系统的前端项目最佳实践. 2. 要求 由于业务需求比较多,一名开发人员需要负

  • IOS 中UIApplication详解及实例

    IOS 中UIApplication详解及实例 以前刚学iPhone开发时,觉得UIApplication这个东西特NB,特神秘,比如它居然能打开一个URL,而且还是用一个很神秘的方法得到实例: [UIApplication sharedApplication] 它对我的神秘感一直保持到今天下午.今天下午负责UI设计的同事在设计,我没有素材,比较清闲,于是发个狠,专门看了一下UIApplication这个类.果然是难者不会,会者不难,看完之后,这个类的神秘感一下子没了.下面让我来揭开它的神秘面纱

  • React全家桶环境搭建过程详解

    本文介绍了React全家桶环境搭建过程详解,分享给大家,具体如下: 环境搭建 1.从零开始搭建webpack+react开发环境 2.引入Typescript 安装依赖 npm i -S @types/react @types/react-dom npm i -D typescript awesome-typescript-loader source-map-loader 新建tsconfig.json { "compilerOptions": { "outDir"

随机推荐