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动态更改html标签的实现方式

    React动态更改html标签的实现方式

    这篇文章主要介绍了React动态更改html标签的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • React避免不必要的重新渲染的方法示例

    React避免不必要的重新渲染的方法示例

    构建高性能 React 应用程序的关键之一是避免不必要的重新渲染,React 的渲染引擎是高效的,但防止在不需要的地方重新渲染仍然至关重要,在这篇文章中,我们将介绍常见错误以及如何避免它们,需要的朋友可以参考下
    2024-10-10
  • React实现数字滚动组件numbers-scroll的示例详解

    React实现数字滚动组件numbers-scroll的示例详解

    数字滚动组件,也可以叫数字轮播组件,这个名字一听就是非常普通常见的组件。本文将利用React实现这一组件,感兴趣的小伙伴可以了解一下
    2023-03-03
  • react如何获取URL中参数

    react如何获取URL中参数

    这篇文章主要介绍了react如何获取URL中参数问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • React 中使用 Redux 的 4 种写法小结

    React 中使用 Redux 的 4 种写法小结

    这篇文章主要介绍了在 React 中使用 Redux 的 4 种写法,Redux 一般来说并不是必须的,只有在项目比较复杂的时候,比如多个分散在不同地方的组件使用同一个状态,本文就React使用 Redux的相关知识给大家介绍的非常详细,需要的朋友参考下吧
    2022-06-06
  • React-Router(V6)的权限控制实现示例

    React-Router(V6)的权限控制实现示例

    本文主要介绍了React-Router(V6)的权限控制实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • React中使用setInterval函数的实例

    React中使用setInterval函数的实例

    这篇文章主要介绍了React中使用setInterval函数的实例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • React竞态条件Race Condition实例详解

    React竞态条件Race Condition实例详解

    这篇文章主要为大家介绍了React竞态条件Race Condition实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • React 的调和算法Diffing 算法策略详解

    React 的调和算法Diffing 算法策略详解

    React的调和算法,主要发生在render阶段,调和算法并不是一个特定的算法函数,而是指在调和过程中,为提高构建workInProcess树的性能,以及Dom树更新的性能,而采用的一种策略,又称diffing算法
    2021-12-12
  • React创建对话框组件的方法实例

    React创建对话框组件的方法实例

    在项目开发过程中,对于复杂的业务选择功能很常见,下面这篇文章主要给大家介绍了关于React创建对话框组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05

最新评论