Skip to main content

原生模块介绍

信息

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

¥Native Module and Native Components are our stable technologies used by the legacy architecture. They will be deprecated in the future when the New Architecture will be stable. The New Architecture uses Turbo Native Module and Fabric Native Components to achieve similar results.

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

¥Sometimes a React Native app needs to access a native platform API that is not available by default in JavaScript, for example the native APIs to access Apple or Google Pay. Maybe you want to reuse some existing Objective-C, Swift, Java or C++ libraries without having to reimplement it in JavaScript, or write some high performance, multi-threaded code for things like image processing.

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

¥The NativeModule system exposes instances of Java/Objective-C/C++ (native) classes to JavaScript (JS) as JS objects, thereby allowing you to execute arbitrary native code from within JS. While we don't expect this feature to be part of the usual development process, it is essential that it exists. If React Native doesn't export a native API that your JS app needs you should be able to export it yourself!

原生模块设置​

¥Native Module Setup

有不同的方法可以为你的 React Native 应用编写原生模块：

¥There are different ways to write a native module for your React Native application:

  1. 创建可以在你的 React Native 应用中导入的本地库。阅读 创建本地库 指南以了解更多信息。

    ¥Creating a local library that can be imported in your React Native application. Read Creating local libraries guide to learn more.

  2. 直接在你的 React Native 应用的 iOS/Android 项目中

    ¥Directly within your React Native application's iOS/Android projects

  3. 作为 NPM 包，可以由你的/其他 React Native 应用作为依赖安装。

    ¥As a NPM package that can be installed as a dependency by your/other React Native applications.

本指南将首先引导你直接在 React Native 应用中实现原生模块。但是，你在以下指南中构建的原生模块可以作为 NPM 包进行分发。如果你有兴趣，请查看 将原生模块设置为 NPM 包 指南。

¥This guide will first walk you through implementing a native module directly within a React Native application. However the native module you build in the following guide can be distributed as an NPM package. Check out the Setting Up a Native Module as a NPM Package guide if you are interested in doing so.

入门​

¥Getting Started

在以下部分中，我们将引导你了解如何直接在 React Native 应用中构建原生模块。作为先决条件，你需要一个 React Native 应用才能在其中工作。如果你还没有 React Native 应用，你可以按照步骤 此处 设置。

¥In the following sections we will walk you through guides on how to build a native module directly within a React Native application. As a prerequisite, you will need a React Native application to work within. You can follow the steps here to setup a React Native application if you do not already have one.

想象一下，你想要在 React Native 应用中从 JavaScript 访问 iOS/Android 原生日历 API 以创建日历事件。React Native 不公开 JavaScript API 来与原生日历库进行通信。但是，通过原生模块，你可以编写与原生日历 API 通信的原生代码。然后，你可以在 React Native 应用中通过 JavaScript 调用该原生代码。

¥Imagine that you want to access the iOS/Android native calendar APIs from JavaScript within a React Native application in order to create calendar events. React Native does not expose a JavaScript API to communicate with the native calendar libraries. However, through native modules, you can write native code that communicates with native calendar APIs. Then you can invoke that native code through JavaScript in your React Native application.

在以下部分中，你将为 安卓 和 iOS 创建这样的日历原生模块。

¥In the following sections you will create such a Calendar native module for both Android and iOS.