如何使用独立的 Expo 模块

了解如何通过使用 monorepo 或将包发布到 npm，在项目中使用通过 create-expo-module 创建的独立模块。

Expo 模块 API：开始使用 指南中描述了在现有应用中创建 Expo 模块的推荐方法。本页演练了在现有项目中使用使用 create-expo-module 创建的模块的两种附加方法：

¥The recommended way to create an Expo module inside an existing application is described in the Expo Modules API: Get started guide. This page walkthrough two additional methods of using a module created with create-expo-module inside an existing project:

• 配置单一存储库

  ¥Configure a monorepo

• 将模块发布到 npm

  ¥Publish the module to npm

如果你仍然希望将模块与应用分开或与其他开发者共享，这些方法非常有用。

¥These methods are useful if you still want to keep the module separate from the application or share it with other developers.

使用大仓

¥Use a monorepo

对于本指南，我们假设你具有以下项目结构：

¥For this guide, we assume that you have the following project structure:

• apps/ - 包含多个项目，包括 React Native 应用。

  ¥apps/ - Contains multiple projects, including React Native apps.

• 包/ - 包含你的应用使用的不同包。

  ¥packages/ - Contains different packages used by your apps.

• package.json - 包含 Yarn 工作区配置的根包文件。

  ¥package.json - Root package file containing Yarn workspaces config.

如果你需要熟悉如何将项目配置为 monorepo，请参阅 使用单一存储库 指南。

¥If you need to familiarize yourself with configuring your project as a monorepo, see Working with monorepos guide.

1. 初始化一个新模块

¥ Initialize a new module

设置基本的 monorepo 结构后，使用 create-expo-module 和标志 no-example 创建一个新模块以跳过创建示例应用：

¥Once you have set up the basic monorepo structure, create a new module using create-expo-module with the flag no-example to skip creating the example app:

2. 设置工作区

¥ Set up workspace

现在，让我们配置 autolinking，以便你的所有应用都可以使用新创建的模块。将以下代码块添加到 apps 目录下每个应用的 package.json 文件中：

¥Now, let's configure autolinking so all your apps can use the newly created module. Add the following block to the package.json file of each app under the apps directory:

"expo": {
  "autolinking": {
    "nativeModulesDir": "../../packages"
  }
}

3. 运行模块

¥ Run the module

运行其中一个应用以确保一切正常。然后，在 packages/expo-settings 中启动 TypeScript 编译器以观察更改并重建模块的 JavaScript：

¥Run one of the apps to ensure everything is working. Then, start the TypeScript compiler inside packages/expo-settings to watch for changes and rebuild the module's JavaScript:

打开另一个终端窗口，从 apps 目录中选择一个应用，然后运行 prebuild 命令。你必须对 monorepo 内的所有应用重复这些步骤才能使用新模块。

¥Open another terminal window, choose an app from the apps directory, and run the prebuild command. You'll have to repeat these steps for all apps inside your monorepo to use the new module.

使用以下命令编译并运行应用：

¥Compile and run the app with the following command:

你现在可以在应用中使用该模块。要测试这一点，让我们编辑应用中的 App.js 文件并渲染来自 expo-settings 模块的文本消息：

¥You can now use the module inside your app. To test this, let's edit the App.js file in the app and render the text message from the expo-settings module:

import * as Settings from 'expo-settings';
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Text, View } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>{Settings.hello()}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

完成此配置后，你将看到一条文本：“Hello world！👋 在应用中。

¥After this configuration, you'll see a text that says "Hello world! 👋" in the app.

将模块发布到 npm

¥Publish the module to npm

你可以在 npm 上发布该模块，然后通过将其安装为依赖将其添加到你的项目中。

¥You can publish the module on npm and then add it to your project by installing it as a dependency.

1. 初始化一个新模块

¥ Initialize a new module

首先使用 create-expo-module 创建一个新模块。当你发布此库时，请注意每个提示，并为你的 npm 包选择一个唯一的名称。

¥Start by creating a new module using create-expo-module. Pay attention to each prompt as you'll publish this library, and choose a unique name for your npm package.

2. 运行示例项目

¥ Run the example project

运行示例项目以确保一切正常。然后，启动 TypeScript 编译器以观察更改并重建 JavaScript 模块。

¥Run the example project to make sure everything is working. Then, start the TypeScript compiler to watch for changes and rebuild the JavaScript module.

打开另一个终端窗口，编译并运行示例应用：

¥Open another terminal window, compile and run the example app:

3. 将包发布到 npm

¥ Publish the package to npm

要将你的软件包发布到 npm，你需要有一个 npm 账户。如果你没有，请在 npm 网站 上创建它。拥有账户后，请使用以下命令登录：

¥To publish your package to npm, you need to have a npm account. If you don't have one, create it on the npm website. Once you have an account, log in using the following command:

然后，导航到模块的根目录并发布运行的模块：

¥Then, navigate to the root of your module and publish your module running:

你的模块现在将发布到 npm 并可以使用 npm install 安装在其他项目中。

¥Your module will now be published to npm and can be installed in other projects using npm install.

除了将模块发布到 npm 之外，还有其他方法可以在项目中使用它：

¥Apart from publishing your module to npm, there are other ways to use it in your project:

• 使用 npm pack 创建模块的 tarball 并通过运行 npm install /path/to/tarball 将其直接安装到项目中。在将模块发布到 npm 之前，或者如果你想与无权访问 npm 注册表的其他人共享它，在本地测试你的模块非常有用。

  ¥Create a tarball of your module using npm pack and install it directly in your project by running npm install /path/to/tarball. It's useful to test your module locally before publishing it to npm or if you want to share it with others who don't have access to the npm registry.

• 运行本地 npm 注册表，例如 Verdaccio，并从那里安装你的模块。这对于你想要托管私有 npm 注册表来管理公司或组织内的内部包的情况非常有用。

  ¥Run a local npm registry, such as Verdaccio, and install your module from there. This is useful for cases where you want to host your private npm registry to manage internal packages within a company or organization.

• 通过 EAS Builds 发布私有包或使用私有注册表。

  ¥Publish a private package or use a private registry with EAS Builds.

4. 测试发布的模块

¥ Test the published module

要在新项目中测试已发布的模块，请创建一个新应用并将该模块安装为依赖：

¥To test the published module in a new project, create a new app and install the module as a dependency:

你现在应该可以在应用中使用该模块了！要测试它，请在应用中编辑 App.js 并从 expo-settings 渲染文本消息。

¥You should now be able to use the module inside your app! To test it, edit the App.js in the app and render the text message from expo-settings.

import * as Settings from 'expo-settings';
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Text, View } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>{Settings.hello()}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

要在本地运行你的应用，请运行 prebuild 命令，然后编译该应用。

¥To run your app locally, run the prebuild command and then compile the app.

完成此配置后，你将看到一条文本：“Hello world！👋 在应用中。

¥After this configuration, you'll see a text that says "Hello world! 👋" in the app.