首页指南参考教程

集成到现有库中

了解如何将 Expo Modules API 集成到现有的 React Native 库中。


在某些情况下,你可能希望将 Expo Modules API 集成到现有的 React Native 库中。例如,这对于逐步重写库或利用 iOS AppDelegate 订阅者Android 生命周期监听器 自动设置库可能很有用。

¥There are cases where you may want to integrate the Expo Modules API into an existing React Native library. For example, this may be useful to incrementally rewrite the library or to take advantage of iOS AppDelegate subscribers and Android Lifecycle listeners to automatically set up your library.

以下步骤将设置你现有的 React Native 库以访问 Expo Modules API。

¥The following steps will set up your existing React Native library to access Expo Modules APIs.

在项目的根目录下创建 expo-module.config.json 文件,并从其中的空对象 {} 开始。我们稍后将填写它以启用特定功能。模块配置的存在足以让 Expo 自动链接 将其识别为 Expo 模块并自动链接你的原生代码。

¥Create the expo-module.config.json file at the root of your project and start from the empty object {} inside it. We will fill it in later to enable specific features. The presence of the module config is enough for Expo Autolinking to recognize it as an Expo module and automatically link your native code.

添加 expo-modules-core 原生依赖

¥Add the expo-modules-core native dependency

expo-modules-core 添加为 podspec 和 build.gradle 文件中的依赖。

¥Add expo-modules-core as a dependency in your podspec and build.gradle files.

*.podspec
# ...
Pod::Spec.new do |s|
  # ...
  s.dependency 'ExpoModulesCore'
end
build.gradle
// ...
dependencies {
  // ...
  implementation project(':expo-modules-core')
}

将 Expo 包添加到依赖中

¥Add Expo packages to dependencies

在 package.json 中添加 expo 包作为对等依赖 - 我们建议使用 * 作为版本范围,以免在用户的 node_modules 文件夹中导致任何重复的包。你的库还需要依赖于 expo-modules-core,但仅作为开发依赖 - 它已经在项目中根据你的库由 expo 包提供,其核心版本与项目中使用的特定 SDK 兼容。

¥Add expo package as a peer dependency in your package.json — we recommend using * as a version range so as not to cause any duplicated packages in user's node_modules folder. Your library also needs to depend on expo-modules-core but only as a dev dependency — it's already provided in the projects depending on your library by the expo package with the version of core that is compatible with the specific SDK used in the project.

package.json
{
  // ...
  "devDependencies": {
    "expo-modules-core": "^X.Y.Z"
  },
  "peerDependencies": {
    "expo": "*"
  },
  "peerDependenciesMeta": {
    "expo": {
      "optional": true
    }
  }
}

创建原生模块

¥Create a native module

要将 Expo Modules API 用于原生模块,你需要 将你的库设置为 Expo 模块。完成后,从下面的模板创建 Swift 和 Kotlin 文件。

¥To use the Expo Modules API for native modules, you need to set up your library as an Expo module. Once complete, create Swift and Kotlin files from the templates below.

MyModule.swift
import ExpoModulesCore

public class MyModule: Module {
  public func definition() -> ModuleDefinition {
    // Definition components go here
  }
}
MyModule.kt
package my.module.package

import expo.modules.kotlin.modules.Module
import expo.modules.kotlin.modules.ModuleDefinition

class MyModule : Module() {
  override fun definition() = ModuleDefinition {
    // Definition components go here
  }
}

然后,将你的类添加到 模块配置 中的 Android 和/或 iOS modules。Expo Autolinking 将自动将这些类链接为用户项目中的原生模块。

¥Then, add your classes to Android and/or iOS modules in the module config. Expo Autolinking will automatically link these classes as native modules in the user's project.

expo-module.config.json
{
  "ios": {
    "modules": ["MyModule"]
  },
  "android": {
    "modules": ["my.module.package.MyModule"]
  }
}

如果你的工作区中已有示例应用,请确保模块已正确链接。

¥If you already have an example app in your workspace, ensure that the module is linked correctly.

  • 在 Android 上,作为 Gradle 构建任务的一部分,原生模块类将在构建之前自动链接。

    ¥On Android the native module class will be linked automatically before building, as part of the Gradle build task.

  • 在 iOS 上,你需要运行 pod install 来链接新类。现在可以使用 expo-modules-core 包中的 requireNativeModule 函数从 JavaScript 代码访问这些模块类。为了简单起见,我们建议创建一个导出原生模块的单独文件。

    ¥On iOS you need to run pod install to link the new class. These module classes can now be accessed from the JavaScript code using the requireNativeModule function from the expo-modules-core package. We recommend creating a separate file that exports the native module for simplicity.

MyModule.ts
import { requireNativeModule } from 'expo-modules-core';

export default requireNativeModule('MyModule');

现在该类已设置并链接,你可以开始实现其功能。请参阅 原生模块 API 参考页面以及从简单到中等复杂的实际模块的 examples 链接,供你参考,以更好地了解如何使用 API。

¥Now that the class is set up and linked, you can start to implement its functionality. See the native module API reference page and links to examples from simple to moderately complex real-world modules for your reference to better understand how to use the API.

Expo 中文网 - 粤ICP备13048890号