如何使用独立的 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 a workspace dependency

将你的本地模块从 packages 添加到应用的依赖中。更新 apps 目录中每个将使用你的本地模块的应用的 package.json 文件，并将本地模块添加到现有的依赖中：

🌐 Add your native module from packages to your apps' dependencies. Update the package.json file in each app inside the apps directory that will use your native module and add your native module to the existing entries of dependencies:

{
  "dependencies": {
    %%placeholder-start%%... %%placeholder-end%%
    "expo-settings": "*"
    %%placeholder-start%%... %%placeholder-end%%
  }
}

运行模块

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

打开另一个终端窗口，从 apps 目录中选择一个应用，然后使用 --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:

• 创建 tar 包：使用 npm pack 创建你的模块的 tar 包，然后通过运行 npm install /path/to/tarball 将其安装到你的项目中。这种方法有助于在发布模块或与无法访问 npm 注册表的其他人共享之前，在本地测试你的模块。
• 运行本地 npm 注册表：使用像 Verdaccio 这样的工具来托管本地 npm 注册表。你可以从该注册表安装你的模块，这对于管理公司或组织内部的软件包非常有用。
• 发布私有包： 使用 EAS Build 的私有注册表 来安全地管理私有模块。

测试已发布的模块

🌐 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.