跳到主要内容

原生模块介绍

信息

原生模块和原生组件是我们由旧架构使用的稳定技术。当新架构稳定后,它们将在未来被弃用。新架构使用 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 创建这样的日历原生模块。