首页指南参考教程

工具、工作流程和扩展

详细了解使用开发版本时可用的不同工具、工作流程和扩展。


开发构建允许你快速迭代。但是,你可以扩展开发构建的功能,以便在团队工作时提供更好的开发者体验,或者自定义构建以满足你的需求。

¥Development builds allow you to iterate quickly. However, you can extend the capabilities of your development build to provide a better developer experience when working in teams or customize the build to suit your needs.

工具

¥Tools

通道 URL

¥Tunnel URLs

有时,限制性网络条件导致难以连接到开发服务器。npx expo start 命令将你的开发服务器公开在可通过全球防火墙访问的公开 URL 上。如果你无法使用默认 LAN 选项连接到开发服务器,或者你想在开发过程中获得有关实现的反馈,则此选项会很有帮助。

¥Sometimes, restrictive network conditions make it difficult to connect to the development server. The npx expo start command exposes your development server on a publicly available URL that is accessible through firewalls from around the globe. This option is helpful if you are not able to connect to your development server with the default LAN option or if you want to get feedback on your implementation while you are developing.

要获取隧道 URL,请从命令行将 --tunnel 传递到 npx expo start

¥To get a tunneled URL, pass the --tunnel flag to npx expo start from the command line.

已发布的更新

¥Published updates

EAS CLI 的 eas update 命令将 JavaScript 和资源文件的当前状态打包到优化的 "update" 中。此更新存储在 Expo 的托管服务上。应用的开发版本可以加载已发布的更新,而无需检查特定提交或让开发计算机保持运行。

¥EAS CLI's eas update command bundles the current state of your JavaScript and asset files into an optimized "update". This update is stored on a hosting service by Expo. A development build of your app can load published updates without needing to check out a particular commit or leave a development machine running.

手动输入更新的 URL

¥Manually entering an update's URL

当开发版本启动时,它将公开 UI 以加载开发服务器或 "手动输入网址"。你可以手动提供将启动特定分支的 URL。URL 遵循以下模式:

¥When a development build launches, it will expose UI to load a development server, or to "Enter URL manually". You can provide a URL manually that will launch a specific branch. The URL follows this pattern:

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,请使用 应用配置的 expo.updates.url 字段中的 URL。要查看通道列表,请运行 eas channel:list

¥To get your project's ID, use the URL in the app config's expo.updates.url field. To see a list of channels, run eas channel:list.

深层链接到更新的 URL

¥Deep linking to an update's URL

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

¥You can load your app on a device that has a compatible build of your custom client by opening a URL of the form {scheme}://expo-development-client/?url={manifestUrl}. You'll need to pass the following parameters:

参数value
scheme客户端的 URL 方案(默认为 exp+{slug},其中 slug 是应用配置中设置的值)
manifestUrl要加载的更新清单的 URL 编码 URL。网址将为 https://u.expo.dev/[your-project-id]?channel-name=[channel-name]

示例:

¥Example:

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

上例中,schemeexp+app-slugmanifestUrl 为项目,项目 ID 为 F767ADF57-B487-4D8F-9522-85549C39F43F,通道为 main

¥In the example above, the scheme is exp+app-slug, and the manifestUrl is a project with an ID of F767ADF57-B487-4D8F-9522-85549C39F43F and a channel of main.

应用特定的深层链接

¥App-specific deep links

在开发版本中测试深层链接时,例如导航到 Expo Router 应用中的特定屏幕或在 Oauth 登录流程中测试重定向回你的应用时,请按照与深层链接到某个应用时完全相同的方式构造 URL。 你的应用的独立构建(例如,myscheme://path/to/screen)。

¥When testing deep links in your development build, such as when navigating to a specific screen in an Expo Router app or testing redirecting back to your app during an Oauth login flow, construct the URL exactly as you would if you were deep-linking into a standalone build of your app (for example, myscheme://path/to/screen).

你的项目必须已在开发版本中打开,特定于应用的深层链接才能工作。目前不支持使用特定于应用的深层链接冷启动开发版本。避免在路径中特定于应用的深层链接中使用 expo-development-client,因为它是用于启动更新的 URL 的保留路径。

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

当提供查询参数(例如 appSchemeurl)时,发送到 https://qr.expo.dev/development-client 的请求将收到带有 SVG 图片的响应,其中包含 QR 代码,可以轻松扫描该 QR 代码以在开发版本中加载项目版本。

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

参数value
appScheme开发版本的 URL 编码深度链接方案(默认为 exp+{slug},其中 slug 是应用配置中设置的值)
url要加载的更新清单的 URL 编码 URL。网址将为 https://u.expo.dev/[your-project-id]?channel-name=[channel-name]

示例:

¥Example:

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

上例中,schemeexp+app-slugurl 为项目,项目 ID 为 F767ADF57-B487-4D8F-9522-85549C39F43F,通道为 main

¥In the example above, the scheme is exp+app-slug, and the url is a project with an ID of F767ADF57-B487-4D8F-9522-85549C39F43F and a channel of main.

工作流程示例

¥Example workflows

这些是一些工作流程示例,可帮助你的团队充分利用你的开发构建。如果你想出其他对其他团队有用的建议,请 提交 PR 分享你的知识!

¥These are a few examples of workflows to help your team get the most out of your development build. If you come up with others that would be useful for other teams, please submit a PR to share your knowledge!

PR 预览

¥PR previews

你可以将 CI 流程设置为在拉取请求更新时发布 EAS 更新,并添加用于查看兼容开发版本中的更改的 QR 代码。

¥You can set up your CI process to publish an EAS Update whenever a pull request is updated and add a QR code that is used to view the change in a compatible development build.

请参阅 关于根据拉取请求发布应用预览的说明,使用 GitHub Actions 在你的项目中实现此工作流程,或在你选择的 CI 中用作模板。

¥See instructions for publishing app previews on pull requests to implement this workflow in your project using GitHub Actions or serve as a template in your CI of choice.

扩展

¥Extensions

扩展允许你使用附加功能来扩展你的开发客户端。

¥Extensions allow you to extend your development client with additional capabilities.

扩展开发菜单

¥Extending the dev menu

可以使用 registerDevMenuItems API 扩展开发菜单以包含额外的按钮:

¥The dev menu can be extended to include extra buttons by using the registerDevMenuItems API:

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

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

registerDevMenuItems(devMenuItems);

这将在开发菜单中创建一个新部分,其中包含你已注册的按钮:

¥This will create a new section in the dev menu that includes the buttons you have registered:

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

¥Subsequent calls of registerDevMenuItems will override all previous entries.

EAS 更新

¥EAS Update

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

¥The EAS Update extension provides the ability to view and load published updates in your development client.

它适用于所有 v0.9.0 及以上的开发客户端。要安装它,你需要最新发布的 expo-updates

¥It's available for all development clients v0.9.0 and above. To install it, you'll need the most recent publish of expo-updates:

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

配置 EAS 更新

¥Configure EAS Update

如果你的项目中尚未配置 EAS 更新,你可以找到 有关如何执行此操作的其他说明,请参见此处。

¥If you have not yet configured EAS Updates in your project, you can find additional instructions on how to do so here.

你现在可以通过 Extensions 面板在开发版本中查看和加载 EAS 更新。

¥You can now view and load EAS Updates in your development build via the Extensions panel.

在应用配置中设置运行时版本

¥Set runtimeVersion in app config

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

¥When you create a development build of your project, you'll get a stable environment to load any changes to your app that are defined in JavaScript or other asset-related changes. Other changes to your app, whether defined directly in android and ios directories or by packages or SDKs you choose to install, will require you to create a new build of your development build.

要在应用的 JavaScript 层和原生层之间强制执行 API 协定,你应该在应用配置中设置 runtimeVersion 值。你制作的每个构建都将嵌入此值,并且在开发和生产中仅加载具有相同 runtimeVersion 的打包包。

¥To enforce an API contract between the JavaScript and native layers of your app, you should set the runtimeVersion value in the app config. Each build you make will have this value embedded and will only load bundles with the same runtimeVersion, in both development and production.

Expo 中文网 - 粤ICP备13048890号