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

 更新时间:2018年01月17日 09:08:55   作者:一天清晨  
本篇文章主要介绍了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 Hooks 闭包陷阱

    深入解析React Hooks 闭包陷阱

    这篇文章主要为大家介绍了React Hooks闭包陷阱的深入探究,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • React报错之Parameter event implicitly has an any type解决

    React报错之Parameter event implicitly has a

    这篇文章主要为大家介绍了React报错之Parameter event implicitly has an any type,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • ReactDOM 隐藏特性详解

    ReactDOM 隐藏特性详解

    这篇文章主要为大家介绍了ReactDOM 隐藏特性详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • React Router V6更新内容详解

    React Router V6更新内容详解

    这篇文章主要为大家介绍了React Router V6更新内容,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • react基于react-slick实现多图轮播效果

    react基于react-slick实现多图轮播效果

    React slick是一个使用React构建的轮播组件,下面这篇文章主要给大家介绍了关于react基于react-slick实现多图轮播效果的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • react中如何使用局部样式

    react中如何使用局部样式

    这篇文章主要介绍了react中如何使用局部样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • webpack3+React 的配置全解

    webpack3+React 的配置全解

    本篇文章主要介绍了webpack3+React 的配置全解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • react项目引入antd框架方式以及遇到的一些坑

    react项目引入antd框架方式以及遇到的一些坑

    这篇文章主要介绍了react项目引入antd框架方式以及遇到的一些坑,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • react实现简单的拖拽功能

    react实现简单的拖拽功能

    这篇文章主要为大家详细介绍了react实现简单的拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • react实现移动端二级路由嵌套详解

    react实现移动端二级路由嵌套详解

    这篇文章主要介绍了react移动端二级路由嵌套的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08

最新评论