expo-module

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Writing Expo Modules

编写Expo Modules

Complete reference for building native modules and views using the Expo Modules API. Covers Swift (iOS), Kotlin (Android), and TypeScript.

使用Expo Modules API构建原生模块和视图的完整参考文档，覆盖Swift（iOS）、Kotlin（Android）和TypeScript技术栈。

When to Use

何时使用

Creating a new Expo native module or native view
Adding native functionality (camera, sensors, system APIs) to an Expo app
Wrapping platform SDKs for React Native consumption
Building config plugins that modify native project files

创建新的Expo原生模块或原生视图
为Expo应用添加原生功能（相机、传感器、系统API）
封装平台SDK供React Native使用
构建可修改原生项目文件的配置插件

References

参考资料

Consult these resources as needed:

references/
  native-module.md           Module definition DSL: Name, Function, AsyncFunction, Property, Constant, Events, type system, shared objects
  native-view.md             Native view components: View, Prop, EventDispatcher, view lifecycle, ref-based functions
  lifecycle.md               Lifecycle hooks: module, iOS app/AppDelegate, Android activity/application listeners
  config-plugin.md           Config plugins: modifying Info.plist, AndroidManifest.xml, reading values in native code
  module-config.md           expo-module.config.json fields and autolinking configuration

可根据需要查阅以下资源：

references/
  native-module.md           Module definition DSL: Name, Function, AsyncFunction, Property, Constant, Events, type system, shared objects
  native-view.md             Native view components: View, Prop, EventDispatcher, view lifecycle, ref-based functions
  lifecycle.md               Lifecycle hooks: module, iOS app/AppDelegate, Android activity/application listeners
  config-plugin.md           Config plugins: modifying Info.plist, AndroidManifest.xml, reading values in native code
  module-config.md           expo-module.config.json fields and autolinking configuration

Quick Start

快速开始

Create a Local Module (in existing app)

在现有应用中创建本地模块

bash

npx create-expo-module@latest --local

Generated structure:

modules/
  my-module/
    android/
    ios/
    src/
    expo-module.config.json
    index.ts

bash

npx create-expo-module@latest --local

生成的项目结构：

modules/
  my-module/
    android/
    ios/
    src/
    expo-module.config.json
    index.ts

Create a Standalone Module (for publishing)

创建可发布的独立模块

bash

npx create-expo-module@latest my-module

bash

npx create-expo-module@latest my-module

Minimal Module

最简模块

The Swift and Kotlin DSL share the same structure. Both platforms are shown here for reference — in other reference files, Swift is shown as the primary language unless the Kotlin pattern meaningfully differs.

Swift (iOS):

swift

import ExpoModulesCore

public class MyModule: Module {
  public func definition() -> ModuleDefinition {
    Name("MyModule")

    Function("hello") { (name: String) -> String in
      return "Hello \(name)!"
    }
  }
}

Kotlin (Android):

kotlin

package expo.modules.mymodule

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

class MyModule : Module() {
  override fun definition() = ModuleDefinition {
    Name("MyModule")

    Function("hello") { name: String ->
      "Hello $name!"
    }
  }
}

TypeScript:

typescript

import { requireNativeModule } from "expo";

const MyModule = requireNativeModule("MyModule");

export function hello(name: string): string {
  return MyModule.hello(name);
}

Swift和Kotlin DSL共享相同的结构。这里同时展示两个平台的代码供参考——在其他参考文件中，除非Kotlin的实现模式存在明显差异，否则默认以Swift作为主要示例语言。

Swift (iOS):

swift

import ExpoModulesCore

public class MyModule: Module {
  public func definition() -> ModuleDefinition {
    Name("MyModule")

    Function("hello") { (name: String) -> String in
      return "Hello \(name)!"
    }
  }
}

Kotlin (Android):

kotlin

package expo.modules.mymodule

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

class MyModule : Module() {
  override fun definition() = ModuleDefinition {
    Name("MyModule")

    Function("hello") { name: String ->
      "Hello $name!"
    }
  }
}

TypeScript:

typescript

import { requireNativeModule } from "expo";

const MyModule = requireNativeModule("MyModule");

export function hello(name: string): string {
  return MyModule.hello(name);
}

expo-module.config.json

json

{
  "platforms": ["android", "apple"],
  "apple": {
    "modules": ["MyModule"]
  },
  "android": {
    "modules": ["expo.modules.mymodule.MyModule"]
  }
}

Note: iOS uses just the class name; Android uses the fully-qualified class name (package + class). See

references/module-config.md

for all fields.

json

{
  "platforms": ["android", "apple"],
  "apple": {
    "modules": ["MyModule"]
  },
  "android": {
    "modules": ["expo.modules.mymodule.MyModule"]
  }
}

注意：iOS仅使用类名；Android使用全限定类名（包名+类名）。可查看

references/module-config.md

了解所有配置字段。