中文网
Nodejs.cn 旗下网站
首页指南EAS参考教程

集成到现有库中

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

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

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

本指南将帮助你设置现有的 React Native 库以访问 Expo Modules API。

¥This guide will help you set up your existing React Native library to access Expo Modules API.

先决条件

¥Prerequisites

在项目根目录下创建 expo-module.config.json 文件，并在其中添加一个空对象 {}。你稍后将填写它以启用特定功能。

¥Create the expo-module.config.json file at the root of your project and add an empty object {} inside it. You will fill it in later to enable specific features.

创建此文件对于 Expo 自动链接 将你的库识别为 Expo 模块并自动链接你的原生代码是必要的。

¥Creating this file is necessary for Expo Autolinking to recognize your library as an Expo module and automatically link your native code.

1

Add the expo-modules-core native dependency

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

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

2

Add Expo packages to dependencies

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 directory.

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
{
  %%placeholder-start%%... %%placeholder-end%%
  "devDependencies": {
    "expo-modules-core": "^X.Y.Z"
  },
  "peerDependencies": {
    "expo": "*"
  },
  "peerDependenciesMeta": {
    "expo": {
      "optional": true
    }
  }
}

3

Create a native module

Create Kotlin and Swift files from the templates below:

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
  }
}
MyModule.swift
import ExpoModulesCore

public class MyModule: Module {
  public func definition() -> ModuleDefinition {
    // Definition components go here
  }
}

Then, add your classes to Android and/or iOS modules in the expo-module.config.json file. 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.

  • On Android the native module class will be linked automatically before building, as part of the Gradle build task.
  • On iOS you need to run pod install to link the new class.

These module classes are now accessible 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 to understand how to use the API.