跳到主要内容

原生模块介绍

信息

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

有时,React Native 应用需要访问 JavaScript 中默认不可用的原生平台 API,例如访问 Apple Pay 或 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. 作为 NPM 包,可以由您/其他 React Native 应用程序安装为依赖项。

本指南将首先引导您完成直接在 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 创建这样一个日历原生模块。