在 React Native 中,Native 模块是一种用于连接 JavaScript 代码和底层原生代码的机制。通过使用 Native 模块,你可以调用和使用原生代码中的功能,这对于执行性能敏感的任务或者利用设备特定的功能非常有用。以下是在 React Native 中创建和使用 Native 模块(iOS 版本)的基本步骤:

创建 Native 模块:

1. 创建 Native 模块文件:
   在你的 React Native 项目中,创建一个新的 Native 模块文件,通常以 .m 作为文件扩展名。该文件将包含原生代码。
   // MyNativeModule.m

   #import <React/RCTBridgeModule.h>

   @interface MyNativeModule : NSObject <RCTBridgeModule>
   @end

   @implementation MyNativeModule

   RCT_EXPORT_MODULE(); // 导出模块

   RCT_EXPORT_METHOD(doSomething) {
     // 执行原生代码
   }

   @end

2. 链接 Native 模块:
   打开项目的 Xcode 工程,确保 Native 模块文件被添加到 Xcode 项目中。你可能需要手动链接文件。

3. 导出模块和方法:
   使用 RCT_EXPORT_MODULE 宏导出模块,并使用 RCT_EXPORT_METHOD 宏导出模块中的方法。这样,这些方法就可以从 JavaScript 代码中调用。

在 JavaScript 中使用 Native 模块:

1. 导入 Native 模块:
   在你的 JavaScript 代码中,使用 NativeModules 来导入 Native 模块。
   import { NativeModules } from 'react-native';
   const MyNativeModule = NativeModules.MyNativeModule;

2. 调用原生方法:
   调用在 Native 模块中定义的方法。
   MyNativeModule.doSomething();

传递数据:

在原生方法和 JavaScript 之间传递数据,你可以使用回调函数或者 Promises。你还可以使用 RCT_EXPORT_METHOD 宏的参数列表来声明方法接受的参数。
// MyNativeModule.m

RCT_EXPORT_METHOD(doSomethingWithCallback:(RCTResponseSenderBlock)callback) {
  // 执行原生代码
  NSArray *resultData = @[/* 数据 */];
  callback(@[[NSNull null], resultData]);
}
// JavaScript

MyNativeModule.doSomethingWithCallback((error, result) => {
  if (error) {
    console.error(error);
  } else {
    console.log(result);
  }
});

这是一个基本的 Native 模块创建和使用的示例。请注意,要确保模块的命名空间在 JavaScript 中与导出的模块名称一致。此外,还有其他高级用法和配置选项,具体取决于你的需求和项目结构。


转载请注明出处:http://www.zyzy.cn/article/detail/9451/React Native