React Native填坑之旅--与Native通信之iOS篇

简介:

终于开始新一篇的填坑之旅了。RN厉害的一个地方就是RN可以和Native组件通信。这个Native组件包括native的库和自定义视图,我们今天主要设计的内容是native库方面的只是。自定义视图的使用会在后面讲到。

坑是什么样的坑

主要的是遇到一个业务需求,需要检测当前应用的版本是什么。需要返回当前的版本号和build数。

主要的需求在native来说非常简单:

    NSString * version = [[NSBundle mainBundle] objectForInfoDictionaryKey: @"CFBundleShortVersionString"];
    NSString * build = [[NSBundle mainBundle] objectForInfoDictionaryKey: (NSString *)kCFBundleVersionKey];

两句分别获得了版本号和build数。

开始填坑

填坑其实也是意外的简单。当然,我们不准备把这个代码作为库发布到npm上给别人用,所以复杂度自然降低了不少。

首先、在Xcode里创建RNUpgrade类作为后面和RN通信的native组件。这会在项目里创建两个objc的文件RNUpgrade.hRNUpgrade.m

RNUpgrade.h头文件中,添加RCTBridgeModule协议。要给RN暴露接口这个协议是必须的。

#import <Foundation/Foundation.h>
#import "RCTBridgeModule.h"

@interface RNUpgrade : NSObject<RCTBridgeModule>

@end

之后对于头文件就可以什么都不用管了。至少对于暴露接口这件事是这样的。

下面就来看源文件吧。

看文档,要暴露native方法就必须在源文件里包含一个宏的调用,这个宏是:RCT_EXPORT_MODULE()。这个宏可以包含一个参数指定RN中访问这个模块的名字。默认的就是你的objc类的名字。

#import "RNUpgrade.h"
#import "RCTUtils.h"
#import "AppDelegate.h"

NSString *const RNUPGRADE_ERROR_DOMAIN = @"Upgrade info error";

@implementation RNUpgrade

RCT_EXPORT_MODULE();

@end

那么如何来暴露出一个方法呢?使用RCT_EXPORT_METHOD()宏。官网的例子:

RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location)
{ 
    RCTLogInfo(@"Pretending to create an event %@ at %@", name, location);
}

RCT_EXPORT_METHOD的参数就是这个方法的声明部分,方法体在外面。RCT_EXPORT_METHOD(someMethod:(NSString*)stringParameter)这样的,然后外面写方法体。
那么,我要返回现在APP的版本信息就可以写成这样:

RCT_EXPORT_METHOD(getCurrentInfo) {
  @try {
    NSString * version = [[NSBundle mainBundle] objectForInfoDictionaryKey: @"CFBundleShortVersionString"];
    NSString * build = [[NSBundle mainBundle] objectForInfoDictionaryKey: (NSString *)kCFBundleVersionKey];
    return @{@"versionName": version, @"versionCode": build}
  } @catch (NSException *exception) {
      //Log error info...
  }
}

但是,如何返回字典呢?直接return?接着差文档。

暴露给RN的方法是不能直接返回任何东西的。因为RN的调用时异步的,所以只能使用回调的方式,或者触发事件的方式实现返回值。

回调!看个官网的例子:

RCT_EXPORT_METHOD(findEvents:(RCTResponseSenderBlock)callback)
{ 
    NSArray *events = ... 
    callback(@[[NSNull null], events]);
}

好的,回调就说到这里了。因为笔者的项目已经上了async/await了,回调就显得没啥必要了。而且,文档显示。RN也提供了暴露接口返回Promise的支持。只需要在方法里接受两个参数,一个resolver,一个rejecter

RCT_EXPORT_METHOD(getCurrentInfo:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject) {
  @try {
    NSString * version = [[NSBundle mainBundle] objectForInfoDictionaryKey: @"CFBundleShortVersionString"];
    NSString * build = [[NSBundle mainBundle] objectForInfoDictionaryKey: (NSString *)kCFBundleVersionKey];
    resolve(@{@"versionName": version, @"versionCode": build});
  } @catch (NSException *exception) {
    NSError *error = [NSError errorWithDomain:RNUPGRADE_ERROR_DOMAIN code:1 userInfo: exception.userInfo];
    reject(exception.name, exception.reason, error);
  }
}

于是,这样就可以返回一个Promise了。

在RN的项目里调用这个方法:

// 首先通过`NativeModules`接收暴露的native模块。
import { NativeModules } from "react-native"
const upgrade = NativeModules.RNUpgrade

// 方法调用
const ret = await Promise.all([upgrade.getCurrentInfo(), upgrade.getUpgradeInfo()])

没错,模块还有另外一个native方法。这个native方法也返回一个Promise

返回声明相同的native方法

其实在native模块里很多方法的声明都是一模一样的:resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject。因为我只需要接收一个resolverrejecter以便返回一个Promise。于是就用到了RN提供的另外一个宏:RCT_REMAP_METHOD。这个宏专门用来处理声明基本一样的情况。它会把native里的声明基本一样的宏映射到一个唯一的RN方法名称上。

RCT_REMAP_METHOD(getCurrentInfo,
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject) {
  @try {
    NSString * version = [[NSBundle mainBundle] objectForInfoDictionaryKey: @"CFBundleShortVersionString"];
    NSString * build = [[NSBundle mainBundle] objectForInfoDictionaryKey: (NSString *)kCFBundleVersionKey];
    resolve(@{@"versionName": version, @"versionCode": build});
  } @catch (NSException *exception) {
    NSError *error = [NSError errorWithDomain:RNUPGRADE_ERROR_DOMAIN code:1 userInfo: exception.userInfo];
    reject(exception.name, exception.reason, error);
  }
}

基本上在项目里如何暴露一个native方法给RN的js调用非常简单,就如上面所述一样。

  1. 在头文件里继承了RCTBridgeModule协议。
  2. 在源文件里使用RCT_EXPORT_MODULE();宏。
  3. 使用宏RCT_EXPORT_METHOD暴露方法。
    如果方法需要返回值的话使用回调、或者Promise。这也只是native方法写几个参数的问题。

重要的一点:线程

在文档中有这么一点:多线程。千万不要根据RN实现的一些细节就假设你的模块运行在某某线程上。官网也说了,这个是会变的。如果你要确定你的代码运行在什么线程上,通过方法- (dispatch_queue_t)methodQueue来指定。

注意:指定的methodQueue会被你模块里的所有方法共享。

如果运行在主线程上:

- (dispatch_queue_t)methodQueue
{ 
    return dispatch_get_main_queue();
}

如果运行在自己创建的线程上:

- (dispatch_queue_t)methodQueue
{ 
    return dispatch_queue_create("com.facebook.React.AsyncLocalStorageQueue", DISPATCH_QUEUE_SERIAL);
}

如果模块里只有小部分代码运行在其他的线程上,可以使用native里传统的方法dispatch_async来实现:

RCT_EXPORT_METHOD(doSomethingExpensive:(NSString *)param callback:(RCTResponseSenderBlock)callback)
{
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
        // 在这里执行长时间的操作 ... 
        // 你可以在任何线程/队列中执行回调函数 
        callback(@[...]);
    });
}

而且:methodQueue
方法会在模块被初始化的时候被执行一次,然后会被React Native的桥接机制保存下来,所以你不需要自己保存队列的引用

省心省力!

填坑完毕!

欢迎加群互相学习,共同进步。QQ群:iOS: 58099570 | Android: 572064792 | Nodejs:329118122 做人要厚道,转载请注明出处!





















本文转自张昺华-sky博客园博客,原文链接:http://www.cnblogs.com/sunshine-anycall/p/6141372.html ,如需转载请自行联系原作者
相关文章
|
2月前
|
消息中间件 前端开发
React技术栈-组件间通信的2种方式
本文介绍了React技术栈中组件间通信的两种方式:通过props传递数据和使用消息发布(publish)-订阅(subscribe)机制,并通过实例代码展示了如何使用PubSubJS库实现跨组件通信。
51 11
React技术栈-组件间通信的2种方式
|
6月前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
230 0
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
4月前
|
前端开发 JavaScript Android开发
React Native跨平台开发实战
【7月更文挑战第21天】React Native为跨平台移动应用开发提供了一种高效且强大的解决方案。通过本文的学习,你应该能够掌握React Native的基本概念和实战步骤,并开始在你的项目中使用React Native进行开发。随着你对React Native的深入理解,你将能够利用其强大的功能来构建更加复杂和高效的移动应用。
|
5月前
|
存储 前端开发 JavaScript
在React中有效地管理组件之间的通信和数据流
在React中有效地管理组件之间的通信和数据流
|
5月前
|
前端开发 自动驾驶 程序员
鸿蒙? 车载?Flutter? React Native? 为什么我劝你三思,说点不一样的
本文探讨了在信息技术快速发展的背景下,开发者如何选择学习路径。作者提倡使用终局思维来规划职业发展,考虑技术的长远影响。终局思维注重长远目标、系统分析、反向规划和动态调整。以车载开发为例,预测未来智能汽车可能由语音助手主导,而非依赖平板界面。此外,作者建议不要过分投入打工状态,应思考创建自己的产品,如App,以实现技能补充和额外收入。选择对未来发展和自主性有益的技术,如Kotlin,比盲目追求热点更为重要。做减法和有标准的选择,能帮助减轻焦虑,实现更高效的成长。关注公众号“AntDream”获取更多相关内容。
123 1
|
6月前
|
开发框架 移动开发 前端开发
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
【5月更文挑战第14天】Uniapp和React Native是热门的跨平台移动开发框架。Uniapp以其一套代码多端运行、丰富的组件生态和较低的学习曲线受到青睐,适合快速开发简单应用。React Native基于React,拥有活跃社区和优秀性能,适合复杂应用。React Native在性能上略胜一筹,尤其在需要接近原生体验的场景。Uniapp的官方组件弥补了社区资源不足。选择时需考虑开发效率、性能需求、团队技术栈和社区支持。
1775 1
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
|
5月前
|
开发框架 前端开发 JavaScript
移动应用开发中的跨平台策略:Flutter与React Native的比较
在移动应用领域,跨平台解决方案已成为开发者追求高效、成本效益和广泛覆盖的关键。本文深入探讨了两种领先的跨平台框架——Flutter和React Native,从技术架构、性能、社区生态及实际应用案例四个维度进行全面对比分析。通过这一比较,旨在为移动应用开发者提供选择合适框架的参考依据,帮助他们根据项目需求做出明智的决策。
|
5月前
|
前端开发 iOS开发 Android开发
React Native跨平台开发实战:从零到一
学习React Native跨平台开发,首先安装Node.js和React Native CLI,设置Android/iOS环境。使用CLI创建项目,如`npx react-native init MyProject`。运行应用:`npx react-native run-android`或`run-ios`。编写组件,如在App.js中创建Hello World。添加样式,安装第三方库如react-native-vector-icons,使用react-navigation进行路由和导航。
102 2
|
6月前
|
前端开发 JavaScript Android开发
使用React Native开发跨平台移动应用的技术详解
【5月更文挑战第22天】本文详述了使用React Native开发跨平台移动应用的技术,该框架由Facebook推出,基于JavaScript,支持iOS和Android。React Native通过JNI/JSI实现JavaScript到原生代码的转换,提供高效性能和原生体验。其优势包括跨平台性、原生体验、开发速度及社区支持。开发流程涉及环境搭建、项目创建、编码、调试与测试,以及构建与发布。注意事项包括性能优化、平台适配、利用第三方库和持续学习。React Native为开发者构建高质量跨平台应用提供了便捷途径,未来潜力无限。
|
5月前
|
Dart 前端开发 JavaScript
探索移动应用开发中的跨平台解决方案:Flutter与React Native的比较
在移动应用开发领域,选择合适的跨平台解决方案是关键。本文将深入分析Flutter和React Native这两大主流框架,从性能、开发效率、社区支持等方面进行比较,帮助开发者做出明智的选择。
70 0