工具、工作流与扩展

编辑

了解在开发构建中可用的不同工具、工作流和扩展的更多信息。

开发构建让你能够快速迭代。然而，你也可以扩展开发构建的能力，以在团队协作时提供更好的开发者体验，或自定义构建以满足你的需求。

工具

隧道 URL

有时，受限的网络条件会使连接到开发服务器变得困难。npx expo start 命令会在一个公开可访问的 URL 上暴露你的开发服务器，全球的防火墙都能通过该 URL 访问。这在你无法使用默认的 LAN 选项连接到开发服务器，或在开发过程中想要获得对实现的反馈时非常有用。

要获取隧道 URL，请从命令行中向 npx expo start 传递 --tunnel flag。

发布的更新

EAS CLI 的 eas update 命令将你当前的 JavaScript 和资源文件的状态打包成一个优化的“更新”。该更新由 Expo 存储在一个托管服务上。你应用的开发构建可以加载已发布的更新，而不需要检出特定提交或让开发机器一直运行。

手动输入更新的 URL

当开发构建启动时，它将暴露一个 UI 用以加载开发服务器，或选择“手动输入 URL”。你可以手动提供一个 URL，以启动特定分支。该 URL 的格式如下：

https://u.expo.dev/[your-project-id]?channel-name=[channel-name]

# Example
https://u.expo.dev/F767ADF57-B487-4D8F-9522-85549C39F43F?channel-name=main

要获取你的项目 ID，请使用在 app config 的 expo.updates.url 字段中的 URL。要查看通道列表，请运行 eas channel:list。

更新的 URL 的深度链接

你可以通过打开形如 {scheme}://expo-development-client/?url={manifestUrl} 的 URL，在具有与你的自定义客户端兼容版本的设备上加载你的应用。你将需要传递以下参数：

参数	值
`scheme`	你客户端的 URL scheme（默认为 `exp+{slug}`，其中 `slug` 是在应用配置中设置的值）
`manifestUrl`	要加载的更新清单的 URL 编码形式。该 URL 将是 `https://u.expo.dev/[your-project-id]?channel-name=[channel-name]`

示例：

exp+app-slug://expo-development-client/?url=https%3A%2F%2Fu.expo.dev%2F767ADF57-B487-4D8F-9522-85549C39F43F%2F%3Fchannel-name%3Dmain

在上面的示例中，scheme 是 exp+app-slug，而 manifestUrl 是一个 ID 为 F767ADF57-B487-4D8F-9522-85549C39F43F 的项目，通道为 main。

在自动化场景中使用更新深链接

在使用自动化（如 CI/CD 工作流）在模拟器或仿真器中启动开发构建的更新 URL 时，您可以在 URL 中添加 disableOnboarding=1 查询参数，以跳过首次安装开发构建后首次启动时出现的引导屏幕。

应用程序特定的深链接

在开发构建中测试深链接时，例如在 Expo Router 应用中导航到特定屏幕或在 OAuth 登录流程中测试回到应用程序的重定向，请按您在深度链接到独立构建的应用程序时的方式来构造 URL（例如，myscheme://path/to/screen）。

Your project must be already open in the development build for an app-specific deep link to work. Cold-launching a development build with an app-specific deep link is not currently supported. Avoid using expo-development-client in your app-specific deep links in the path, as it is a reserved path used for launching an updated URL.

QR codes

You can use our endpoint to generate a QR code that can be easily loaded by a development build.

Requests send to https://qr.expo.dev/development-client when supplied the query parameters such as appScheme and url will receive a response with an SVG image containing a QR code that can be easily scanned to load a version of your project in your development build.

参数	值
`appScheme`	开发构建的 URL 编码的深度链接 scheme（默认为 `exp+{slug}`，其中 `slug` 是在应用配置中设置的值）
`url`	更新清单的 URL 编码 URL 用于加载。该 URL 将是 `https://u.expo.dev/[your-project-id]?channel-name=[channel-name]`

示例：

https://qr.expo.dev/development-client?appScheme=exp%2Bapps-slug&url=https%3A%2F%2Fu.expo.dev%2FF767ADF57-B487-4D8F-9522-85549C39F43F0%3Fchannel-name%3Dmain

在上面的示例中，scheme 为 exp+app-slug，而 url 是一个 ID 为 F767ADF57-B487-4D8F-9522-85549C39F43F 的项目，频道为 main。

示例工作流

这些只是一些工作流示例，帮助你的团队充分利用开发构建的优势。如果你想出对其他团队也有用的做法，请提交一个 PR 分享你的知识！

PR 预览

你可以将 CI 过程设置为在拉取请求更新时发布一个 EAS Update，并添加一个用于在兼容的开发构建中查看变更的二维码。

请参阅在拉取请求上发布应用预览的说明，以在您的项目中使用 GitHub Actions 实现此工作流，或在您选择的 CI 中作为模板使用。

扩展

扩展允许您为开发客户端添加额外的功能。

扩展开发菜单

开发者菜单可以通过使用 registerDevMenuItems API 来扩展，添加额外的按钮：

import { registerDevMenuItems } from 'expo-dev-menu';

const devMenuItems = [
  {
    name: 'My Custom Button',
    callback: () => console.log('Hello world!'),
  },
];

registerDevMenuItems(devMenuItems);

这将创建一个 dev menu 新的部分，其中包含您已注册的按钮：

An example of a custom menu button in expo-dev-menu

后续调用 registerDevMenuItems 将覆盖所有先前的条目。

EAS 更新

An example list of EAS Update that can be loaded in the expo-dev-client.

EAS Update 扩展提供在你的开发客户端中查看和加载已发布更新的能力。

它可用于所有开发客户端 v0.9.0 及以上版本。要安装它，你需要获取 expo-updates 的最新发布版本：

Terminal

- npx expo install expo-dev-client expo-updates

配置 EAS Update

如果您尚未在项目中配置 EAS Updates，可以在这里找到关于如何进行的额外说明。

现在，您可以通过 Extensions 面板在开发构建中查看并加载 EAS Updates。

在应用配置中设置 runtimeVersion

当您为项目创建一个开发构建时，您将获得一个稳定的环境，以加载应用中用 JavaScript 或其他资源相关变更所定义的任何更改。对应用的其他更改，无论是在 android 和 ios 目录中直接定义，还是通过您选择安装的包或 SDK 定义，都需要您创建一个新的开发构建版本。

为强制应用的 JavaScript 层与本地层之间的 API 合同，您应在应用配置中设置 runtimeVersion 值。您所做的每次构建都会将该值嵌入，并且在开发和生产环境中只加载具有相同 runtimeVersion 的 bundle。