Expo 模块 API:快速上手
了解 Expo 模块 API 入门。
**有两种方式可以开始使用 Expo Modules API:**你可以从零初始化一个新模块,或者将 Expo Modules API 添加到现有模块中。本指南将引导你从零创建一个新模块,而在现有库中集成则涵盖了后者。
使用 Expo Modules API 创建新模块的两个推荐流程:
🌐 The two recommended flows to create a new module with Expo Modules API:
- 向现有的 Expo 应用添加一个新模块,并使用它来测试和开发你的模块。
- 如果你想在多个项目中重用它或发布到 npm,请在隔离环境中创建一个带生成示例项目的新模块。
下一节将介绍这两个流程。
🌐 Both of these flows are covered in the next sections.
向现有应用添加新模块
🌐 Add a new module to an existing application
1
创建本地 Expo 模块
🌐 Create the local Expo module
导航到你的项目目录(包含 package.json 文件的目录),然后运行以下命令。这是创建本地 Expo 模块的推荐方式。
🌐 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.
- npx create-expo-module@latest --local你可以在命令行提示中提供一个有意义的模块名。对于其余的提示,你也可以接受默认建议。
🌐 You can provide a meaningful module name in the CLI prompt. For the rest of the prompts, you can also accept the default suggestions.
一旦你运行了该命令,你将在你的项目中看到一个名为 modules 的新目录被创建。目录结构应该如下所示:
🌐 Once you've run the command, you will see a new directory created in your project called modules. The directory structure should look like this:
modulesmy-moduleandroidiossrcexpo-module.config.jsonindex.ts然后,如果你的项目没有生成原生项目(android 和 ios 目录),请运行以下命令,否则跳过此命令:
🌐 Then, if your project doesn't have native projects generated (android and ios directories), run the following command, otherwise skip this command:
- npx expo prebuild --clean注意:如果你的项目根目录中已有一个使用
npx expo prebuild创建的 ios 目录,你必须重新安装 pods:
Terminal-npx pod-install
2
使用本地模块
🌐 Use the local module
在你的应用中导入本地模块,例如在 App.js 或 App.tsx 或 app/(tabs)/index.tsx 中:
🌐 Import the local module in your application, for example in App.js or App.tsx or app/(tabs)/index.tsx:
%%placeholder-start%%...%%placeholder-end%% import MyModule from '@/modules/my-module'; export default function HomeScreen() { return ( <View style={styles.container}> <Text>{MyModule.hello()}</Text> </View> ); }
在终端启动开发服务器,这样当你编辑本地模块并在下一步构建应用时,修改将会反映在应用中:
🌐 Start the development server 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:
- npx expo start恭喜!你已经创建了一个本地 Expo 模块。现在你可以开始使用它了。
🌐 Congratulations! You have created a local Expo module. You can now start working on it.
信息 提示:你也可以通过应用这些配置更改来使用绝对导入路径。
3
编辑模块
🌐 Edit the module
为了在本地开发和测试你的模块,我们使用 Android Studio 和 Xcode 来进行 Android 和 iOS 的开发。
🌐 To develop and test your module locally, let's use Android Studio and Xcode for Android and iOS.
安卓
🌐 Android
- 在 Android Studio 中打开你项目中的 android 目录(该目录由步骤 1 中的
npx expo prebuild生成)。Gradle 同步本地目录项目可能需要一些时间。 - 一旦项目同步完成,打开 modules/my-module/android/src/main/java/expo/modules/mymodule/MyModule.kt 文件。
- 将
hello函数修改为返回不同的字符串,例如 "Hello world! 🌎🤖",然后保存文件。 - 通过点击顶部菜单栏的 运行 'app' 按钮来构建应用,你将在屏幕上看到更改。
每次对原生代码进行更改时,都必须重复构建步骤以使更改生效。
🌐 You have to repeat the build step anytime you make a change to the native code to the changes.
iOS
- 在 Xcode 中打开项目中的 ios 目录(由第 1 步的
npx expo prebuild生成),通过运行xed ios命令。 - 在 Pods > Development Pods > MyModule 中,打开 MyModule.swift 文件。
- 将
hello函数修改为返回不同的字符串,例如 "Hello world! 🌎🍎",然后保存文件。 - 通过点击顶部菜单栏的 运行 按钮或按 ⌘ Cmd + R 来构建你的应用,你将在屏幕上看到更改。
每次对原生代码进行更改时,都必须重复构建步骤以使更改生效。
🌐 You have to repeat the build step anytime you make a change to the native code to the changes.
信息 提示:如果你向模块添加了新的本地文件或修改了 expo-module.config.json,请使用
npx pod-install重新安装 pods。
注意:还有其他方式可以在与你的应用并行的情况下开发 Expo 模块。例如,你可以使用 monorepo 或发布到 npm,如 如何使用独立的 Expo 模块 指南中所述。
创建一个带有示例项目的新模块
🌐 Create a new module with an example project
1
创建 Expo 模块
🌐 Create the Expo module
要从零创建一个新的 Expo 模块,请按如下所示运行 create-expo-module 脚本。该脚本会询问你一些问题,然后生成原生 Expo 模块以及使用你新模块的 Android 和 iOS 示例应用。
🌐 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.
- npx create-expo-module@latest my-module2
打开模块并启动开发服务器
🌐 Open the module and start the development server
导航到模块目录,然后通过运行以下命令打开 Android 和/或 iOS 示例项目:
🌐 Navigate to the module directory and then open the Android and/or iOS example project by running the following commands:
- cd my-module- npm run open:android- npm run open:ios进入 example 目录,并在终端中启动开发服务器,这样当你编辑原生模块并在下一步构建应用时,修改将会反映在应用中:
🌐 Go to example directory and start the development server 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:
- cd example- npx expo start注意: 如果你使用的是 Windows 系统,你可以通过在 Android Studio 中打开 android 目录来打开示例项目,但无法打开 iOS 项目文件。
3
编辑模块
🌐 Edit the module
安卓
🌐 Android
- 打开 my-module/android/src/main/java/expo/modules/mymodule/MyModule.kt 文件。
- 将
hello函数修改为返回不同的字符串,例如 "Hello world! 🌎🤖",然后保存文件。 - 通过点击顶部菜单栏的 运行 'app' 按钮来构建应用,你将在屏幕上看到更改。
每次对原生代码进行更改时,都必须重复构建步骤以使更改生效。
🌐 You have to repeat the build step anytime you make a change to the native code to the changes.
iOS
- 在 Pods > Development Pods > MyModule 中,打开 MyModule.swift 文件。
- 将
hello函数修改为返回不同的字符串,例如 "Hello world! 🌎🍎",然后保存文件。 - 通过点击顶部菜单栏的 运行 按钮或按 ⌘ Cmd + R 来构建你的应用,你将在屏幕上看到更改。
每次对原生代码进行更改时,都必须重复构建步骤以使更改生效。
🌐 You have to repeat the build step anytime you make a change to the native code to the changes.
信息 提示:如果你向模块添加了新的本地文件或修改了 expo-module.config.json,请使用
npx pod-install重新安装 pods。
下一步
🌐 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 创建保留设置的原生模块的教程。
创建使用 Swift 和 Kotlin 的原生模块的参考资料。