跳到主要内容

原生模块介绍

信息

原生模块和原生组件是旧架构中使用的稳定技术。当新架构稳定后,它们将来会被废弃。新架构使用 Turbo 原生模块Fabric 原生组件 来实现类似的结果。

有时,React Native 应用需要访问 JavaScript 中默认不可用的原生平台 API,例如访问 Apple 或 Google Pay 的原生 API。也许你想重用一些现有的 Objective-C、Swift、Java 或 C++ 库,而不必在 JavaScript 中重新实现它们,或者编写一些用于图像处理等高性能、多线程的代码。

NativeModule 系统将 Java/Objective-C/C++(原生)类的实例作为 JS 对象暴露给 JavaScript(JS),从而允许你在 JS 中执行任意原生代码。虽然我们不期望此功能成为常规开发过程的一部分,但它的存在至关重要。如果 React Native 没有导出你的 JS 应用所需的原生 API,你应该能够自行导出!

原生模块设置

为你的 React Native 应用编写原生模块有不同的方式

  1. 创建一个可以在你的 React Native 应用中导入的本地库。阅读 创建本地库 指南了解更多信息。
  2. 直接在你的 React Native 应用的 iOS/Android 项目中
  3. 作为一个可以被你的/其他 React Native 应用安装为依赖项的 NPM 包。

本指南将首先引导你直接在 React Native 应用中实现一个原生模块。然而,你在接下来的指南中构建的原生模块可以作为 NPM 包分发。如果你对此感兴趣,请查看 将原生模块设置为 NPM 包 指南。

入门

在以下章节中,我们将通过指南向你展示如何直接在 React Native 应用中构建原生模块。作为先决条件,你需要一个 React Native 应用来进行操作。如果你还没有,可以按照此处的步骤设置一个 React Native 应用。

假设你想在 React Native 应用中从 JavaScript 访问 iOS/Android 原生日历 API,以便创建日历事件。React Native 没有暴露用于与原生日历库通信的 JavaScript API。但是,通过原生模块,你可以编写与原生日历 API 通信的原生代码。然后,你可以在 React Native 应用中通过 JavaScript 调用该原生代码。

在以下章节中,你将为 AndroidiOS 创建这样一个日历原生模块。