如何使用独立的 Expo 模块

初始化一个新模块

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

设置 workspace 依赖

将位于 packages 中的原生模块添加到应用的依赖中。更新 apps 目录下每个将使用该原生模块的应用中的 package.json 文件，并将你的原生模块添加到现有的 dependencies 条目中：

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

运行模块

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

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

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

现在你就可以在应用中使用该模块了。为了测试它，请编辑应用中的 src/app/index.tsx 文件，并渲染来自 expo-settings 模块的文本消息：

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! 👋"。

初始化一个新模块

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

运行示例项目

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

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

将包发布到 npm

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

进入模块根目录，然后运行以下命令将其发布：

你的模块现在将被发布到 npm，并可以通过 npm install 安装到其他项目中。

除了将模块发布到 npm 之外，你还可以通过以下方式在项目中使用它：

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

测试已发布的模块

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

现在你就可以在应用中使用该模块了！要测试它，请编辑 src/app/index.tsx 并渲染来自 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>
  );
}

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

完成此配置后，你会看到应用中显示文本 "Hello world! 👋"。