如何使用独立的 Expo 模块

初始化一个新模块

¥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:

设置工作区

¥Set up workspace

配置 autolinking，以便你的应用可以使用新模块。将以下块添加到 apps 目录内每个应用中的 package.json 文件中：

¥Configure autolinking so your apps can use the new module. Add the following block to the package.json file in each app inside the apps directory:

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

运行模块

¥Run the module

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

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

打开另一个终端窗口，从应用目录中选择一个应用，然后使用 --clean 选项运行 prebuild 命令。对 monorepo 中的每个应用重复这些步骤以使用新模块。

¥Open another terminal window, select an app from the apps directory, and run the prebuild command with the --clean option. Repeat these steps for each app in your monorepo to use the new module.

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

¥Compile and run the app with the following command:

你现在可以在你的应用中使用该模块。要测试它，请在你的应用中编辑 app/(tabs)/index.tsx 文件并从 expo-settings 模块渲染文本消息：

¥You can now use the module in your app. To test it, edit the app/(tabs)/index.tsx file in your app and render the text message from the expo-settings module:

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

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

经过此配置后，应用会显示文本“Hello world!👋 .

¥After this configuration, the app displays the text "Hello world! 👋".

初始化一个新模块

¥Initialize a new module

首先使用 create-expo-module 创建一个新模块。请仔细按照提示操作，因为你将发布此库，并为你的 npm 包选择一个唯一的名称。

¥Start by creating a new module with create-expo-module. Follow the prompts carefully, as you will publish this library, and choose a unique name for your npm package.

运行示例项目

¥Run the example project

运行你的一个应用以确保一切正常。然后，在项目根目录中启动 TypeScript 编译器来监视更改并重建模块的 JavaScript：

¥Run one of your apps to ensure everything works. Then, start the TypeScript compiler in the root of your project to watch for changes and rebuild the module's JavaScript:

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

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

将包发布到 npm

¥Publish the package to npm

要将你的包发布到 npm，你需要一个 npm 账户。如果你没有，请在 npm 网站 上创建一个账户。创建账户后，通过运行以下命令登录：

¥To publish your package to npm, you need an npm account. If you don't have one, create an account on the npm website. After creating an account, log in by running the following command:

导航到模块的根目录，然后运行以下命令将其发布：

¥Navigate to the root of your module, then run the following command to publish it:

你的模块现在将发布到 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, you can use it in your project in the following ways:

• 创建 tarball：使用 npm pack 创建模块的 tarball，然后通过运行 npm install /path/to/tarball 将其安装在项目中。此方法有助于在发布模块或与无法访问 npm 注册表的其他人共享模块之前在本地测试模块。

  ¥Create a tarball: Use npm pack to create a tarball of your module, then install it in your project by running npm install /path/to/tarball. This method is helpful for testing your module locally before publishing it or sharing it with others who don't have access to the npm registry.

• 运行本地 npm 注册表：使用 Verdaccio 之类的工具托管本地 npm 注册表。你可以从此注册表安装模块，这对于管理公司或组织内的内部包非常有用。

  ¥Run a local npm registry: Use a tool such as Verdaccio to host a local npm registry. You can install your module from this registry, which is useful for managing internal packages within a company or organization.

• 发布私有包：使用带有 EAS Build 的私有注册表 安全地管理私有模块。

  ¥Publish a private package: Use a private registry with EAS Build to manage private modules securely.

测试发布的模块

¥Test the published module

要在新项目中测试已发布的模块，请创建一个新应用并通过运行以下命令将该模块安装为依赖：

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

你现在可以在你的应用中使用该模块！要测试它，请编辑 app/(tabs)/index.tsx 并从 expo-settings 渲染文本消息。

¥You can now use the module in your app! To test it, edit app/(tabs)/index.tsx and render the text message from expo-settings.

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

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

最后，预构建你的项目并通过执行以下命令运行该应用：

¥Finally, prebuild your project and run the app by executing the following commands:

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

¥After this configuration, you see the text "Hello world! 👋" displayed in the app.