Expo 模块 API:开始使用

了解 Expo 模块 API 入门。


有两种方法可以开始使用 Expo Modules API:你可以从头开始初始化新模块,也可以将 Expo Modules API 添加到现有模块。本指南将引导你从头开始创建新模块,集成到现有库中 涵盖后者。

¥There are two ways to get started with the Expo Modules API: you can either initialize a new module from scratch or add the Expo Modules API to an existing module. This guide will walk you through creating a new module from scratch, and the Integrating in an existing library covers the latter.

使用 Expo Modules API 创建新模块的两个推荐流程:

¥The two recommended flows to create a new module with Expo Modules API:

下一节将介绍这两个流程。

¥Both of these flows are covered in the next sections.

向现有应用添加新模块

¥Add a new module to an existing application

1

Create the local Expo module

Navigate to your project directory (the one that contains the package.json file) and run the following command. This is the recommended way to create a local Expo module.

Terminal
npx create-expo-module@latest --local

Then, if your project doesn't have native projects generated (android and ios directories), run the following command, otherwise skip this command:

Terminal
npx expo prebuild --clean

You can provide a meaningful module name in the CLI prompt. For the rest of the prompts, you can also accept the default suggestions.

Note: If you have a pre-existing ios directory in your project's root which was created using npx expo prebuild, you must reinstall the pods:


Terminal
npx pod-install

2

Use the local module

Import the local module in your application, for example in App.js or App.tsx or app/index.tsx:

App.tsx
%%placeholder-start%%...%%placeholder-end%%
import MyModule from './modules/my-module';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>{MyModule.hello()}</Text>
    </View>
  );
}

Start the development sever in your terminal so that when you edit the native module and build the app in the next step, the changes will be reflected in the app:

Terminal
npx expo start

Congratulations! You have created a local Expo module. You can now start working on it.

Tip: You can also use absolute import paths by applying these configuration changes.

3

Edit the module

To develop and test your module locally, let's use Android Studio and Xcode for Android and iOS.

Android

  1. Open the android directory (that is generated by npx expo prebuild in step 1) from your project in Android Studio. It may take a while for Gradle to finish syncing the native directory project.
  2. Once the project is synced, open modules/my-module/android/src/main/java/expo/modules/mymodule/MyModule.kt file.
  3. Change hello function to return a different string, such as "Hello world! 🌎🤖" and save the file.
  4. Build the app by clicking Run 'app' button from top menu bar and you will see the changes on the screen.

You have to repeat the build step anytime you make a change to the native code to the changes.

iOS

  1. Open the ios directory (that is generated by npx expo prebuild in step 1) from your project in Xcode by running xed ios command.
  2. Under Pods > Development Pods > MyModule, open MyModule.swift file.
  3. Change hello function to return a different string, such as "Hello world! 🌎🍎" and save the file.
  4. Build your app by clicking Run button from top menu bar or press ⌘ Cmd + R, you will see the changes on the screen.

You have to repeat the build step anytime you make a change to the native code to the changes.

Tip: Use npx pod-install to reinstall the pods if you add new native files to the module or when you modify expo-module.config.json.

Note: There are also other flows for working on an Expo module in parallel with your application. For example, you can use a monorepo or publish to npm, as described in the How to use a standalone Expo module guide.

Create a new module with an example project

1

Create the Expo module

To create a new Expo module from scratch, run the create-expo-module script as shown below. The script will ask you a few questions and then generate the native Expo module along with the example app for Android and iOS that uses your new module.

Terminal
npx create-expo-module@latest my-module

2

Open the module and start the development server

Navigate to the module directory and then open the Android and/or iOS example project by running the following commands:

Terminal
cd my-module
npm run open:android
npm run open:ios

Go to example directory and start the development sever in your terminal so that when you edit the native module and build the app in the next step, the changes will be reflected in the app:

Terminal
cd example
npx expo start

Note: If you're using Windows, you can open the example project by opening the android directory in Android Studio, but you cannot open the iOS project files.

3

Edit the module

Android

  1. Open my-module/android/src/main/java/expo/modules/mymodule/MyModule.kt file.
  2. Change hello function to return a different string, such as "Hello world! 🌎🤖" and save the file.
  3. Build the app by clicking Run 'app' button from top menu bar and you will see the changes on the screen.

You have to repeat the build step anytime you make a change to the native code to the changes.

iOS

  1. Under Pods > Development Pods > MyModule, open MyModule.swift file.
  2. Change hello function to return a different string, such as "Hello world! 🌎🍎" and save the file.
  3. Build your app by clicking Run button from top menu bar or press ⌘ Cmd + R, you will see the changes on the screen.

You have to repeat the build step anytime you make a change to the native code to the changes.

Tip: Use npx pod-install to reinstall the pods if you add new native files to the module or when you modify expo-module.config.json.

下一步

¥Next steps

现在你已经了解了如何初始化模块并对其进行简单的更改,你可以继续学习教程或直接深入了解 API 参考。

¥Now that you have learned how to initialize a module and make simple changes to it, you can continue to a tutorial or dive right into the API reference.

教程:创建原生视图

关于使用 Expo Modules API 创建保留设置的原生模块的教程。

Expo 模块 API 参考

关于使用 Swift 和 Kotlin 创建原生模块的参考。