玩转RN：iOS原生模块导出与js调用

2023-09-08 11:38:44

在 iOS 平台上导出原生模块，让 React Native 如虎添翼

简介

React Native 的精髓在于 "Learn once, write anywhere."。但在某些情况下，开发者可能需要利用原生平台的功能来增强应用性能和能力。通过导出原生模块，React Native 可以与 iOS 原生代码无缝衔接，解锁更多可能性。本文将深入探讨 iOS 平台上原生模块的导出和 JS 调用，为开发者提供一个全面的指南。

原生模块导出的原理

iOS 平台的原生模块导出依赖于 Objective-C 桥接文件。这些文件负责在 iOS 原生代码和 JavaScript 代码之间架起桥梁，让 JavaScript 代码可以访问原生功能。RCTBridgeModule 协议是桥接的关键，定义了导出原生模块方法和属性所需的方法。

原生模块导出的步骤

要导出原生模块，请遵循以下步骤：

创建一个原生模块类，继承自 NSObject。
让该类实现 RCTBridgeModule 协议。
使用 RCT_EXPORT_MODULE() 宏导出模块。
使用 RCT_EXPORT_METHOD() 宏导出模块方法。
在 JavaScript 代码中，使用 require() 函数导入模块。
调用模块方法。

示例代码：

@interface RCTHelloWorldModule : NSObject <RCTBridgeModule>

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(greet:(NSString *)name) {
  NSLog(@"Hello, %@!", name);
}

@end

注意事项：

原生模块类必须实现 RCTBridgeModule 协议。
使用 RCT_EXPORT_MODULE() 宏导出模块。
在 JavaScript 代码中，使用 require() 函数导入模块。

JS 调用原生模块的原理

JavaScript 代码调用原生模块的过程依赖于 JavaScriptCore 框架。JavaScriptCore 是一个 JavaScript 解释器，将 JavaScript 代码编译成机器码执行。在 React Native 中，JavaScriptCore 将 JavaScript 代码转换为 Objective-C 代码，再调用原生模块方法。

JS 调用原生模块的步骤

要从 JS 调用原生模块，请遵循以下步骤：