`。原生组件比 DOM 性能更好，并且提供更出色的用户体验。 - 与可以访问浏览器 API 的 React.js 不同，React Native 使用自定义的原生 API。例如，不是使用 `navigator.geolocation`，而是使用 `expo-location` 来获取用户的位置。自定义原生 API 类似于浏览器 API，但你可以完全控制它们。这意味着你可以在浏览器提供这些功能之前就访问到新的特性。就像 React.js 框架帮助用户轻松创建更大的网站一样，Expo 也帮助用户轻松创建更大的应用。Expo 提供了一套经过充分测试的 React Native 模块，可在 Android、iOS 和网页上运行。Expo 还提供了一套[工具](/eas.md)，用于构建、部署和更新你的应用。 🌐 In the same way React.js frameworks help users create larger websites with ease, Expo helps users create larger apps with ease. Expo provides a suite of well-tested React Native modules that run on Android, iOS, and the web. Expo also provides a [suite of tools](/eas.md) for building, deploying, and updating your app. ## 关于解释代码的商店政策是什么？ 🌐 What are the store policies regarding interpreted code? React Native 使用 JavaScript 解释器（JSC、V8 或 Hermes）来运行你的应用代码。请直接参考 [Google Play 政策中心](https://play.google/developer-content-policy/) 和 [Apple 开发者计划许可协议](https://developer.apple.com/support/terms/apple-developer-program-license-agreement) 以获取最新的政策信息。 🌐 React Native uses a JavaScript interpreter (JSC, V8, or Hermes) to run your application code. Refer to the [Google Play Policy Center](https://play.google/developer-content-policy/) and [Apple Developer Program License Agreement](https://developer.apple.com/support/terms/apple-developer-program-license-agreement) directly for the most up-to-date policy information. _以下是截至2024年4月25日的相关政策摘录。_ 🌐 _The following are excerpts of related policies, as of April 25, 2024._ ### 谷歌应用商店 🌐 Google Play Store ```text ...an app may not download executable code (such as dex, JAR, .so files) from a source other than Google Play. This restriction does not apply to code that runs in a virtual machine or an interpreter where either provides indirect access to Android APIs (such as JavaScript in a webview or browser). Apps or third-party code, like SDKs, with interpreted languages (JavaScript, Python, Lua, etc.) loaded at run time (for example, not packaged with the app) must not allow potential violations of Google Play policies. ``` 来源：[Google Play 政策中心](https://support.google.com/googleplay/android-developer/answer/9888379?hl=en)。 🌐 Source: [Google Play Policy Center](https://support.google.com/googleplay/android-developer/answer/9888379?hl=en). ### 苹果应用商店 🌐 Apple App Store ```text ...Interpreted code may be downloaded to an Application but only so long as such code: (a) does not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store, (b) does not create a store or storefront for other code or applications, and (c) does not bypass signing, sandbox, or other security features of the OS. ``` 来源：[3.3.1 API 和功能 - B. 可执行代码](https://developer.apple.com/support/terms/apple-developer-program-license-agreement#b331)。 🌐 Source: [3.3.1 APIs and Functionality - B. Executable Code](https://developer.apple.com/support/terms/apple-developer-program-license-agreement#b331). ## 我应该使用 Expo CLI 还是 React Native Community CLI？ 🌐 Should I use Expo CLI or React Native Community CLI? Expo CLI 提供与 React Native Community CLI（也称为 “React Native CLI”）相同的核心功能，同时增加了自动 [TypeScript 设置](/guides/typescript.md)、[网页支持](/workflow/web.md)、[自动安装兼容库](/more/expo-cli.md#install)、[改进的原生构建命令](/more/expo-cli.md#compiling)、[隧道功能](/more/expo-cli.md#tunneling)、[预构建](/more/glossary-of-terms.md#prebuild) 以及[更多](/more/expo-cli.md) 等功能。 🌐 Expo CLI offers the same core functionality as React Native Community CLI (also known as "React Native CLI") with additional features such as automatic [TypeScript setup](/guides/typescript.md), [web support](/workflow/web.md), [auto installing compatible libraries](/more/expo-cli.md#install), [improved native build commands](/more/expo-cli.md#compiling), [tunneling](/more/expo-cli.md#tunneling), [Prebuild](/more/glossary-of-terms.md#prebuild), and [more](/more/expo-cli.md). 它可以与 React Native Community 同时使用。无论你使用哪种 CLI，都可以在你的项目中使用 [Expo SDK](/versions/latest.md) 和 [Expo 应用服务](/eas.md) 的任何部分。欲了解更多信息，请参见： 🌐 It can be used simultaneously with React Native Community. Regardless of which CLI you use, you can use any part of the [Expo SDK](/versions/latest.md) and [Expo Application Services](/eas.md) with your project. For more information, see: - 了解如何将现有的 React Native 项目迁移以使用 Expo CLI。 - 了解使用框架构建 React Native 应用的好处 [使用框架构建 React Native 应用](https://rn.nodejs.cn/blog/2024/06/25/use-a-framework-to-build-react-native-apps)。 - 了解迁移到 Expo CLI 的好处，例如提升应用性能、加快发布速度以及促进团队更紧密的协作，请参阅[这篇博客文章](https://expo.dev/blog/from-rnc-cli-to-expo)。 > **注意：** EAS Build 与现有的 React Native 项目兼容（即原生目录已经被纳入版本控制的项目）。当这些目录存在时，EAS Build 不会执行预构建步骤，因为这可能会覆盖你对原生项目文件所做的任何手动自定义。你需要使用 Android Studio 或 Xcode 等原生工具自行配置原生目录。 ## Expo Go 是开源的吗？ 🌐 Is Expo Go open source? 是的，Expo Go 的源代码可以在 [expo/expo GitHub 仓库](https://github.com/expo/expo) 的 **apps/expo-go** 目录中找到。Expo Go 应用也是使用 Expo 和 React Native 构建的。 🌐 Yes, the source for Expo Go can be found in the [expo/expo GitHub repository](https://github.com/expo/expo) in the **apps/expo-go** directory. The Expo Go app is also built with Expo and React Native. ## Expo Go 可以做什么或不能做什么？ 🌐 What can I do or cannot do with Expo Go? [Expo Go](/get-started/set-up-your-environment.md?redirected=#how-would-you-like-to-develop) 是一个供学生和学习者快速测试 Expo 并了解基础知识的实验平台。它允许你使用 Expo SDK 中包含的库，以及不需要自定义原生代码的库。 Expo Go 不能使用需要自定义原生代码的第三方库，并且你无法在 Expo Go 中直接编辑原生代码。它功能有限，对于构建生产级项目并不实用。 🌐 Expo Go cannot use third-party libraries that require custom native code and you cannot edit native code directly in Expo Go. It's limited and not useful for building production-grade projects. **我们强烈建议在任何实际项目中使用[开发版本](/develop/development-builds/introduction.md)。这就像为你的应用需求专门定制一个 Expo Go 版本。** ## 弹出功能是否已弃用？ 🌐 Is ejecting deprecated? > **警告** **此概念已被弃用。** `expo eject` 命令已在 SDK 46 中移除。Expo 现在使用 [连续原生生成 (CNG)](/workflow/continuous-native-generation.md)。要访问或自定义原生代码，请运行 [`npx expo prebuild`](/workflow/continuous-native-generation.md#usage) 以生成原生目录，然后直接修改它们或使用 [配置插件](/config-plugins/introduction.md)。是的，eject 是一个已弃用的术语，现在已经不再必要。当 Expo 刚发布时，应用的原生二进制文件较大，并且不支持自定义原生代码，除非进行“eject”。这一情况在 2020 年 12 月通过发布 [EAS Build](/build/introduction.md) 发生了变化，该工具支持任何 React Native 应用。在 SDK 41（2021 年 4 月）中，“eject” 的概念被 [`npx expo prebuild`](/more/glossary-of-terms.md#prebuild) 命令取代，该命令会根据项目中的库和应用配置文件（**app.json**）持续生成原生项目。`expo eject` 命令在 SDK 46（2022 年 8 月）被完全弃用。 🌐 Yes, eject is a deprecated term and is no longer necessary. When Expo was first released, apps had larger native binary sizes and didn't support custom native code without "ejecting". This changed in December 2020 with the release of [EAS Build](/build/introduction.md) which supports any React Native app. The concept of "ejecting" was replaced by the [`npx expo prebuild`](/more/glossary-of-terms.md#prebuild) command in SDK 41 (April 2021), which continuously generates native projects based on the libraries in your project and the app config (**app.json**). The `expo eject` command was fully deprecated in SDK 46 (August 2022). 与之前的 eject 工作流程不同，作者可以通过创建一个 [配置插件](/config-plugins/introduction.md) 来配置他们的库以与 Expo Prebuild 一起使用。这意味着你可以在 Expo Prebuild 中使用任何库。你还可以通过创建一个 [开发构建](/develop/development-builds/introduction.md) 在 Expo Prebuild 中使用任何自定义的原生代码。更多信息请参见 [Expo Prebuild 文档](/workflow/continuous-native-generation.md)。 🌐 Unlike the previous eject workflow, authors can configure their libraries to work with Expo Prebuild by creating a [config plugin](/config-plugins/introduction.md). This means you can use any library with Expo Prebuild. You can also use any custom native code with Expo Prebuild by creating a [development build](/develop/development-builds/introduction.md). Learn more in the [Expo Prebuild documentation](/workflow/continuous-native-generation.md). --- --- modificationDate: March 14, 2026 title: Expo 和 EAS 教程概览 --- This documentation is available as Markdown for AI agents and LLMs. See the [full Markdown index](/llms.txt) or append .md to any documentation URL. # Expo 和 EAS 教程概览 **学习**部分是教程和其他指南的集合，帮助你了解 Expo 和 Expo 应用服务（EAS）。它涵盖以下内容： 🌐 The **Learn** section is a collection of tutorials and other guides that help you learn about Expo and Expo Application Services (EAS). It covers the following: [Expo 教程](/tutorial/introduction.md) — 如果你是 Expo 的新手并且想自己编写代码，我们建议从本教程开始。它提供了一个逐步指南，教你如何构建可以在 Android、iOS 和网页上运行的 Expo 应用。 [用 AI 构建教程](/tutorial/build-with-ai/introduction.md) — 通过指导 AI 编程代理来构建你的第一个应用，无需编程经验。它涵盖了从零开始设置工具以及在每一步在手机上验证应用的过程。 [EAS 教程](/tutorial/eas/introduction.md) — 如果你想学习如何使用 Expo 应用服务（EAS）构建你的 Android 和 iOS 应用，本教程涵盖了 EAS 构建、更新和提交的工作流程。 --- --- modificationDate: May 12, 2026 title: '教程：使用 React Native 和 Expo' description: 介绍如何使用 Expo 构建可在 Android、iOS 和 Web 上运行的通用应用的 React Native 教程。 --- This documentation is available as Markdown for AI agents and LLMs. See the [full Markdown index](/llms.txt) or append .md to any documentation URL. # 教程：使用 React Native 和 Expo 介绍如何使用 Expo 构建可在 Android、iOS 和 Web 上运行的通用应用的 React Native 教程。我们即将开始一个构建通用应用的旅程。在本教程中，我们将创建一个可以在 Android、iOS 和网页上运行的 Expo 应用；所有这些都使用单一的代码库。让我们开始吧！ 🌐 We're about to embark on a journey of building universal apps. In this tutorial, we'll create an Expo app that runs on Android, iOS, and web; all with a single codebase. Let's get started! > **信息** **编程新手？** 你可以通过提示 AI 编程代理来构建相同的应用，而无需自己编写代码。请参阅 [使用 AI 构建教程](/tutorial/build-with-ai/introduction.md)。它涵盖了从零开始的设置。 ## 关于 React Native 和 Expo 教程 🌐 About React Native and Expo tutorial 本教程的目的是让你开始使用 Expo 并熟悉 Expo SDK。内容将涵盖以下主题： 🌐 The objective of this tutorial is to get started with Expo and become familiar with the Expo SDK. It'll cover the following topics: - 使用启用 TypeScript 的默认模板创建应用 - 使用 Expo Router 实现双屏底部标签布局 - 分解应用布局并使用 Flexbox 实现 - 使用每个平台的系统 UI 从媒体库中选择图片 - 使用 React Native 的 `` 和 `` 组件创建一个贴纸模态框 - 添加触摸手势以与贴纸交互 - 使用第三方库截屏并保存到磁盘 - 处理 Android、iOS 和 Web 之间的平台差异 - 最后，完成配置状态栏、启动画面和图标的过程以完成应用这些主题为学习构建 Expo 应用的基础知识提供了基础。该教程可自行安排学习时间，完成可能需要最多两小时。 🌐 These topics provide a foundation to learn the fundamentals of building an Expo app. The tutorial is self-paced and can take up to two hours to complete. 为了保持初学者友好，我们将教程分成了九章，这样你可以跟着学习，也可以中途停下来以后再继续。每一章都包含完成步骤所需的代码片段，所以你可以选择从零创建应用来跟着操作，或者直接复制粘贴代码。 🌐 To keep it beginner friendly, we divided the tutorial into nine chapters so that you can follow along or put it down and come back to it later. Each chapter contains the necessary code snippets to complete the steps, so you can follow along by creating an app from scratch or copy and paste it. 在我们开始之前，先看看我们将要构建的内容。这是一个名为 **StickerSmash** 的应用，可在 Android、iOS 和网页上运行： 🌐 Before we get started, take a look at what we'll build. It's an app named **StickerSmash** that runs on Android, iOS, and the web: > **信息** 本教程的完整源代码可在 [GitHub](https://github.com/expo/examples/tree/master/stickersmash) 获取。 ## 如何使用本教程 🌐 How to use this tutorial 我们相信[通过实践学习](https://en.wikipedia.org/wiki/Learning-by-doing)，所以本教程强调实际操作而非讲解。你可以通过从零开始创建应用，一起跟随构建应用的过程。 🌐 We believe in [learning by doing](https://en.wikipedia.org/wiki/Learning-by-doing), so this tutorial emphasizes doing over explaining. You can follow along the journey of building an app by creating the app from scratch. 在整个教程中，任何重要的代码或在示例之间有所更改的代码都会以绿色高亮。你可以将鼠标悬停在高亮部分（在桌面端）或点击它们（在移动端）以了解更多关于更改的信息。例如，下面代码片段中高亮显示的代码解释了它的作用： ```tsx import { StyleSheet, Text, View } from 'react-native'; export default function Index() { return ( Hello world! ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); ``` ## 下一步 🌐 Next step 我们已准备好开始构建我们的应用。 🌐 We're ready to start building our app. [开始](/tutorial/create-your-first-app.md) — 让我们先创建一个新的 Expo 应用。 --- --- modificationDate: May 12, 2026 title: 创建你的第一个应用 description: 在本章中，了解如何创建新的 Expo 项目。 --- This documentation is available as Markdown for AI agents and LLMs. See the [full Markdown index](/llms.txt) or append .md to any documentation URL. # 创建你的第一个应用在本章中，了解如何创建新的 Expo 项目。在本章中，我们将学习如何创建一个新的 Expo 项目以及如何运行它。 🌐 In this chapter, let's learn how to create a new Expo project and how to get it running. [观看：创建你的第一个通用 Expo 应用](https://www.youtube.com/watch?v=m1-bc53EGh8) — 从零创建一个新的 Expo 项目，并在 Android、iOS 和网页上运行它。 #### 先决条件 ##### 在实体设备上使用 Expo Go 在实体 Android 或 iOS 设备上安装 [Expo Go](https://expo.dev/go)。 ##### Node.js（长期支持版）在你的计算机上安装 [Node.js（LTS 版本）](https://nodejs.cn/en)。 ##### 代码编辑器安装 [VS Code](https://code.visualstudio.com/) 或任何其他首选的代码编辑器或 IDE。 ##### 带终端的开发者机器打开终端窗口的 macOS、Linux 或 Windows（PowerShell 和 WSL2）。本教程假设你熟悉 TypeScript 和 React。如果你不熟悉，请查看 [TypeScript 手册](https://ts.nodejs.cn/docs/handbook/2/everyday-types.html) 和 [React 官方教程](https://react.nodejs.cn/learn)。 🌐 This tutorial assumes you are familiar with TypeScript and React. If you are not, check out the [TypeScript Handbook](https://ts.nodejs.cn/docs/handbook/2/everyday-types.html) and [React's official tutorial](https://react.nodejs.cn/learn). ## 初始化一个新的 Expo 应用 🌐 Initialize a new Expo app 我们将使用 [`create-expo-app`](/more/create-expo.md) 来初始化一个新的 Expo 应用。这是一个用于创建新的 React Native 项目的命令行工具。在你的终端中运行以下命令： 🌐 We'll use [`create-expo-app`](/more/create-expo.md) to initialize a new Expo app. It is a command-line tool to create a new React Native project. Run the following command in your terminal: ```sh # npm npx create-expo-app@latest StickerSmash Select an Expo SDK version > SDK 54 cd StickerSmash # yarn yarn create expo-app StickerSmash Select an Expo SDK version > SDK 54 cd StickerSmash # pnpm pnpm create expo-app StickerSmash Select an Expo SDK version > SDK 54 cd StickerSmash # bun bun create expo StickerSmash Select an Expo SDK version > SDK 54 cd StickerSmash ``` > **信息** `create-expo-app@latest` 当前要求选择一个 Expo SDK 模板。本教程是为 SDK 54 设计的，因此请确保选择 SDK 54 模板。此命令将创建一个名为 StickerSmash 的新项目目录，使用 [SDK 54 的默认](/more/create-expo.md#--template) 模板。该模板包含构建我们应用所需的基本样板代码和库，包括 Expo Router，并允许我们在设备上安装了 Expo Go 后测试我们的应用。在整个教程中，我们将根据需要继续添加更多库。 🌐 This command will create a new project directory named StickerSmash, using the [SDK 54's default](/more/create-expo.md#--template) template. This template has essential boilerplate code and libraries needed to build our app, including Expo Router and allows us to test our app with Expo Go installed on our devices. We'll continue to add more libraries throughout this tutorial as needed. #### 使用默认模板的好处 - 创建一个新的 React Native 项目，并安装 `expo` 包 - 包括推荐的工具，如 Expo CLI - 包含来自 Expo Router 的标签导航器，用于提供基本的导航系统 - 自动配置以在多个平台上运行项目：Android、iOS 和网页 - TypeScript 默认配置 ## 下载资源 🌐 Download assets [下载资源档案](/static/images/tutorial/sticker-smash-assets.zip) — 在本教程中，我们将始终使用这些资源。下载压缩包后： 🌐 After downloading the archive: 1. 解压存档，并替换 **your-project-name/assets/images** 目录中的默认资源。 2. 在代码编辑器或集成开发环境中打开项目目录。 ## 运行 reset-project 脚本 🌐 Run reset-project script 在本教程中，我们将从零开始构建我们的应用，并了解添加基于文件的导航的基本原理。让我们运行 `reset-project` 脚本来移除样板代码： 🌐 In this tutorial, we'll build our app from scratch and understand the fundamentals of adding a file-based navigation. Let's run the `reset-project` script to remove the boilerplate code: ```sh # npm npm run reset-project # yarn yarn run reset-project # pnpm pnpm run reset-project # bun bun run reset-project ``` 运行上述命令后，**app** 目录中会剩下两个文件（**index.tsx** 和 **_layout.tsx**）。脚本会将 **app** 及其他目录（**components**、**constants** 和 **hooks**——包含模板代码）中的先前文件移动到 **app-example** 目录中。我们将在后续过程中创建自己的目录和组件文件。 🌐 After running the above command, there are two files (**index.tsx** and **_layout.tsx**) left inside the **app** directory. The previous files from **app** and other directories (**components**, **constants**, and **hooks** — containing boilerplate code) are moved inside the **app-example** directory by the script. We'll create our own directories and component files as we go along. #### reset-project 脚本是做什么的？ `reset-project` 脚本会重置项目中的 **app** 目录结构，并将先前的模板文件从项目的根目录复制到名为 **app-example** 的子目录中。我们可以删除它，因为它不是我们主应用结构的一部分。 ## 在移动端和网页上运行该应用 🌐 Run the app on mobile and web 在项目目录中，从终端运行以下命令以启动[开发服务器](/more/glossary-of-terms.md#development-server)： 🌐 In the project directory, run the following command to start the [development server](/more/glossary-of-terms.md#development-server) from the terminal: ```sh # npm npx expo start # yarn yarn expo start # pnpm pnpm expo start # bun bun expo start ``` 运行上述命令后： 🌐 After running the above command: 1. 开发服务器将启动，你会在终端窗口中看到一个二维码。 2. 扫描该二维码以在设备上打开应用。在 Android 上，使用 Expo Go > **扫描二维码** 选项。在 iOS 上，使用默认的相机应用。 3. 要运行 web 应用，请在终端中按 W 。它会在默认的网页浏览器中打开 web 应用。一旦它在所有平台上运行，应用应该看起来像这样： 🌐 Once it is running on all platforms, the app should look like this: ## 编辑索引界面 🌐 Edit the index screen **app/index.tsx** 文件定义了应用屏幕上显示的文本。它是我们应用的入口，当开发服务器启动时会执行。它使用了 React Native 的核心组件，如 `` 和 `` 来显示背景和文本。 🌐 The **app/index.tsx** file defines the text displayed on the app's screen. It is the entry point of our app and executes when the development server starts. It uses core React Native components such as `` and `` to display background and text. 应用于这些组件的样式使用的是 JavaScript 对象，而不是 Web 上使用的 CSS。不过，如果你之前在网页上使用过 CSS，许多属性看起来会很熟悉。大多数 React Native 组件接受一个 `style` 属性，其值是一个 JavaScript 对象。更多详情请参见 [React Native 中的样式](https://rn.nodejs.cn/docs/style)。 🌐 Styles applied to these components use JavaScript objects rather than CSS, which is used on web. However, a lot of the properties will look familiar if you've previously used CSS on web. Most React Native components accept a `style` prop that accepts a JavaScript object as its value. For more details, see [Styling in React Native](https://rn.nodejs.cn/docs/style). 让我们修改 **app/index.tsx** 屏幕： 🌐 Let's modify **app/index.tsx** screen: 1. 从 `react-native` 导入 `StyleSheet` 并创建一个 `styles` 对象来定义我们的自定义样式。 2. 向 `` 添加一个 `styles.container.backgroundColor` 属性，值为 `#25292e`。这会改变背景颜色。 3. 将 `` 的默认值替换为“主屏幕”。 4. 向 `` 添加一个 `styles.text.color` 属性，值为 `#fff`（白色），以更改文本颜色。 ```tsx import { Text, View, StyleSheet } from 'react-native'; export default function Index() { return ( Home screen ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#25292e', alignItems: 'center', justifyContent: 'center', }, text: { color: '#fff', }, }); ``` > React Native 使用与网页相同的颜色格式。它支持十六进制三位数（这就是 `#fff`）、`rgba`、`hsl` 和命名颜色，如 `red`、`green`、`blue`、`peru` 和 `papayawhip`。欲了解更多信息，请参阅 [React Native 中的颜色](https://rn.nodejs.cn/docs/colors)。一旦你保存更改，它们会被发送并应用到连接到开发服务器的运行中的应用中： 🌐 Once you save your changes, they're sent and applied to the running apps connected to the development server: ## 概括 🌐 Summary Chapter 1: Create your first app 我们已成功创建了一个新的 Expo 项目，使用了 React Native 核心组件，并准备开发我们的 StickerSmash 应用。在下一章中，我们将学习如何向我们的应用添加堆栈导航和标签导航。 [下一个：添加导航](/tutorial/add-navigation.md) --- --- modificationDate: May 12, 2026 title: 添加导航 description: 在本章中，了解如何向 Expo 应用添加导航。 --- This documentation is available as Markdown for AI agents and LLMs. See the [full Markdown index](/llms.txt) or append .md to any documentation URL. # 添加导航在本章中，了解如何向 Expo 应用添加导航。在本章中，我们将学习 Expo Router 的基础知识，以创建堆栈导航和带有两个选项卡的底部选项卡栏。 🌐 In this chapter, we'll learn Expo Router's fundamentals to create stack navigation and a bottom tab bar with two tabs. [观看：在你的通用 Expo 应用中添加导航](https://www.youtube.com/watch?v=8336fcFV_T4) — 使用 Expo Router 设置基于文件的路由，在屏幕之间创建堆栈导航，并构建底部标签栏。 ## Expo 路由基础知识 🌐 Expo Router basics Expo Router 是一个基于文件的 React Native 和 Web 应用路由框架。它管理屏幕之间的导航，并在多个平台上使用相同的组件。要开始使用，我们需要了解以下约定： 🌐 Expo Router is a file-based routing framework for React Native and web apps. It manages navigation between screens and uses the same components across multiple platforms. To get started, we need to know about the following conventions: - **应用目录**：一个只包含路由及其布局的特殊目录。添加到该目录的任何文件都会成为我们原生应用中的一个屏幕以及网页上的一个页面。 - **根布局**：**app/_layout.tsx** 文件。它定义了共享的 UI 元素，如头部和选项卡栏，以确保在不同路由之间保持一致。 - **文件命名约定**：_Index_ 文件名，例如 **index.tsx**，与其父目录匹配，并且不添加路径段。例如，**app** 目录中的 **index.tsx** 文件对应 `/` 路由。 - 一个 **route** 文件将一个 React 组件作为其默认值导出。它可以使用 `.js`、`.jsx`、`.ts` 或 `.tsx` 扩展名。 - Android、iOS 和 Web 共享统一的导航结构。 > 上述列表足够我们入门。有关完整功能列表，请参见 [Expo Router 介绍](/router/introduction.md)。 ## 向堆栈中添加一个新屏幕 🌐 Add a new screen to the stack 让我们在 **app** 目录下创建一个名为 **about.tsx** 的新文件。当用户导航到 `/about` 路由时，它会显示屏幕名称。 🌐 Let's create a new file named **about.tsx** inside the **app** directory. It displays the screen name when the user navigates to the `/about` route. ```tsx import { Text, View, StyleSheet } from 'react-native'; export default function AboutScreen() { return ( About screen ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#25292e', justifyContent: 'center', alignItems: 'center', }, text: { color: '#fff', }, }); ``` 在 **app/_layout.tsx** 中： 🌐 Inside **app/_layout.tsx**: 1. 添加一个 `` 组件和一个 `options` 属性来更新 `/about` 路由的标题。 2. 通过添加 `options` 属性，将 `/index` 路由的标题更新为 `Home`。 ```tsx import { Stack } from 'expo-router'; export default function RootLayout() { return ( ); } ``` #### 什么是栈？堆栈导航器是应用中在不同屏幕之间导航的基础。在 Android 上，堆栈路由会在当前屏幕上方进行动画显示。在 iOS 上，堆栈路由会从右侧进行动画显示。Expo Router 提供了一个 `Stack` 组件来创建导航堆栈，以添加新的路由。 🌐 A stack navigator is the foundation for navigating between different screens in an app. On Android, a stacked route animates on top of the current screen. On iOS, a stacked route animates from the right. Expo Router provides a `Stack` component to create a navigation stack to add new routes. ## 在屏幕之间导航 🌐 Navigate between screens 我们将使用 Expo Router 的 `Link` 组件从 `/index` 路由导航到 `/about` 路由。它是一个 React 组件，渲染一个带有指定 `href` 属性的 ``。 🌐 We'll use Expo Router's `Link` component to navigate from the `/index` route to the `/about` route. It is a React component that renders a `` with a given `href` prop. 1. 在 **index.tsx** 中从 `expo-router` 导入 `Link` 组件。 2. 在 `` 组件后添加一个 `Link` 组件，并使用 `/about` 路由传递 `href` 属性。 3. 将 `fontSize`、`textDecorationLine` 和 `color` 样式添加到 `Link` 组件。它接受与 `` 组件相同的属性。 ```tsx import { Text, View, StyleSheet } from 'react-native'; import { Link } from 'expo-router'; export default function Index() { return ( Home screen Go to About screen ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#25292e', alignItems: 'center', justifyContent: 'center', }, text: { color: '#fff', }, button: { fontSize: 20, textDecorationLine: 'underline', color: '#fff', }, }); ``` 让我们来看一下我们应用的变化。点击 `Link` 导航到 `/about` 路由： 🌐 Let's take a look at the changes in our app. Click on `Link` to navigate to the `/about` route: ## 添加未找到的路由 🌐 Add a not-found route 当某个路由不存在时，我们可以使用 `+not-found` 路由来显示备用屏幕。当我们希望在移动端导航到无效路由时显示自定义屏幕，而不是让应用崩溃或在网页上显示 _404_ 错误时，这非常有用。Expo Router 使用一个特殊的 **+not-found.tsx** 文件来处理这种情况。 🌐 When a route doesn't exist, we can use a `+not-found` route to display a fallback screen. This is useful when we want to display a custom screen when navigating to an invalid route on mobile instead of crashing the app or display a _404_ error on web. Expo Router uses a special **+not-found.tsx** file to handle this case. 1. 在 app 目录中创建一个名为 **+not-found.tsx** 的新文件，以添加 `NotFoundScreen` 组件。 2. 从 `Stack.Screen` 添加 `options` 属性以显示此路由的自定义屏幕标题。 3. 添加一个 `Link` 组件以导航到 `/` 路由，这是我们的后备路由。 ```tsx import { View, StyleSheet } from 'react-native'; import { Link, Stack } from 'expo-router'; export default function NotFoundScreen() { return ( <> Go back to Home screen! ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#25292e', justifyContent: 'center', alignItems: 'center', }, button: { fontSize: 20, textDecorationLine: 'underline', color: '#fff', }, }); ``` 要测试此功能，请在网页浏览器中导航到 `http:localhost:8081/123` URL，因为在那里更改 URL 路径很方便。应用应显示 `NotFoundScreen` 组件： 🌐 To test this, navigate to `http:localhost:8081/123` URL in the web browser since it is easy to change the URL path there. The app should display the `NotFoundScreen` component: ## 添加底部标签导航 🌐 Add a bottom tab navigator 此时，我们的 **app** 目录的文件结构如下所示： 🌐 At this point, the file structure of our **app** directory looks like the following: `app` `_layout.tsx``Root layout` `index.tsx``matches route '/'` `about.tsx``matches route '/about'` `+not-found.tsx``matches route any 404 route` 我们将为应用添加一个底部标签导航，并重复使用现有的首页和关于页面来创建标签布局（这是许多社交媒体应用中常见的导航模式，例如 X 或 BlueSky）。我们还将在根布局中使用堆栈导航，以便 `+not-found` 路由显示在任何其他嵌套导航之上。 🌐 We'll add a bottom tab navigator to our app and reuse the existing Home and About screens to create a tab layout (a common navigation pattern in many social media apps like X or BlueSky). We'll also use the stack navigator in the Root layout so the `+not-found` route displays over any other nested navigators. 1. 在 **app** 目录下，添加一个 **(tabs)** 子目录。这个特殊目录用于将路由组合在一起，并在底部标签栏中显示它们。 2. 在目录中创建一个 **(tabs)/_layout.tsx** 文件。它将用于定义选项卡布局，这与根布局是分开的。 3. 将现有的 **index.tsx** 和 **about.tsx** 文件移动到 **(tabs)** 目录中。**app** 目录的结构将如下所示： `app` `_layout.tsx``Root layout` `+not-found.tsx``matches route any 404 route` `(tabs)` `_layout.tsx``Tab layout` `index.tsx``matches route '/'` `about.tsx``matches route '/about'` 更新根布局文件以添加一个 `(tabs)` 路由： 🌐 Update the Root layout file to add a `(tabs)` route: ```tsx import { Stack } from 'expo-router'; export default function RootLayout() { return ( ); } ``` 在 **(tabs)/_layout.tsx** 中，添加一个 `Tabs` 组件来定义底部选项卡布局： 🌐 Inside **(tabs)/_layout.tsx**, add a `Tabs` component to define the bottom tab layout: ```tsx import { Tabs } from 'expo-router'; export default function TabLayout() { return ( ); } ``` 现在让我们来看一下我们的应用，看看新的底部标签： 🌐 Let's take a look at our app now to see the new bottom tabs: ## 更新底部标签导航栏外观 🌐 Update bottom tab navigator appearance 目前，底部标签导航在所有平台上看起来都一样，但与我们应用的风格不匹配。例如，标签栏或标题栏没有显示自定义图标，底部标签的背景颜色也与应用的背景颜色不一致。 🌐 Right now, the bottom tab navigator looks the same on all platforms but doesn't match the style of our app. For example, the tab bar or header doesn't display a custom icon, and the bottom tab background color doesn't match the app's background color. 修改 **(tabs)/_layout.tsx** 文件以添加标签栏图标： 🌐 Modify the **(tabs)/_layout.tsx** file to add tab bar icons: 1. 从 [`@expo/vector-icons`](/guides/icons.md#expovector-icons) 导入 `Ionicons` 图标集——一个包含流行图标集的库。 2. 将 `tabBarIcon` 添加到 `index` 和 `about` 路由中。此函数以 `focused` 和 `color` 作为参数，并渲染图标组件。在图标集中，我们可以提供自定义的图标名称。 3. 将 `screenOptions.tabBarActiveTintColor` 添加到 `Tabs` 组件，并将其值设置为 `#ffd33d`。这将更改标签栏图标和标签在激活时的颜色。 ```tsx import { Tabs } from 'expo-router'; import Ionicons from '@expo/vector-icons/Ionicons'; export default function TabLayout() { return ( ( ), }} /> ( ), }} /> ); } ``` 让我们也使用 `screenOptions` 属性来更改标签栏和标题的背景颜色： 🌐 Let's also change the background color of the tab bar and header using `screenOptions` prop: ```tsx ``` 在上面的代码中： 🌐 In the above code: - 页眉的背景使用 `headerStyle` 属性设置为 `#25292e`。我们还使用 `headerShadowVisible` 禁用了页眉的阴影。 - `headerTintColor` 将 `#fff` 应用于标题标签 - `tabBarStyle.backgroundColor` 将 `#25292e` 应用于标签栏我们的应用现在有了自定义的底部标签导航器： 🌐 Our app now has a custom bottom tabs navigator: ## 概括 🌐 Summary Chapter 2: Add navigation 我们已经成功地在应用中添加了堆栈导航和标签导航。在下一章中，我们将学习如何构建应用的第一个界面。 [下一个：构建你的应用的第一个界面](/tutorial/build-a-screen.md) --- --- modificationDate: May 12, 2026 title: 构建一个屏幕 description: 在本教程中，了解如何使用 React Native 的 Pressable 和 Expo Image 等组件来构建屏幕。 --- This documentation is available as Markdown for AI agents and LLMs. See the [full Markdown index](/llms.txt) or append .md to any documentation URL. # 构建一个屏幕在本教程中，了解如何使用 React Native 的 Pressable 和 Expo Image 等组件来构建屏幕。在本章中，我们将创建 StickerSmash 应用的第一个屏幕。 🌐 In this chapter, we'll create the first screen of the StickerSmash app. 上方的屏幕显示一个图片和两个按钮。应用用户可以使用其中一个按钮选择图片。第一个按钮允许用户从他们的设备中选择图片。第二个按钮允许用户使用应用提供的默认图片继续。 🌐 The screen above displays an image and two buttons. The app user can select an image using one of the two buttons. The first button allows the user to select an image from their device. The second button allows the user to continue with a default image provided by the app. 一旦用户选择了一张图片，他们就可以给它添加贴纸。那我们就开始创建这个界面吧。 🌐 Once the user selects an image, they can add a sticker to it. So, let's start creating this screen. [观看：在你的通用 Expo 应用中构建一个界面](https://www.youtube.com/watch?v=3rcOP8xDwTQ) — 使用 Pressable、Expo Image 和其他核心组件构建 StickerSmash 应用的第一个屏幕，以创建一个图片选择器布局。 ## 拆开屏幕 🌐 Break down the screen 在我们通过编写代码来构建这个界面之前，让我们先将其分解为一些基本元素。 🌐 Before we build this screen by writing code, let's break it down into some essential elements. 有两个基本要素： 🌐 There are two essential elements: - 屏幕中央显示着一张大图片 - 屏幕下半部分有两个按钮第一个按钮包含多个组件。父元素提供黄色边框，并在一行内包含图标和文本组件。 🌐 The first button contains multiple components. The parent element provides a yellow border, and contains an icon and text components inside a row. 现在我们已经将界面拆分成更小的部分，我们可以开始编码了。 🌐 Now that we've broken down the UI into smaller chunks, we're ready to start coding. ## 显示图片 🌐 Display the image 我们将使用 `expo-image` 库在应用中显示图片。它提供了一个跨平台的 `` 组件来加载和渲染图片。它已经包含在我们使用的默认项目模板中。 🌐 We'll use `expo-image` library to display the image in the app. It provides a cross-platform `` component to load and render an image. It is already included in the default project template we're using. Image 组件将图片的来源作为其值。来源可以是[静态资源](https://rn.nodejs.cn/docs/images#static-image-resources)或 URL。例如，来自 **assets/images** 目录的资源是静态的。它也可以来自 [网络](https://rn.nodejs.cn/docs/images#network-images) 作为 `uri` 属性。 🌐 The Image component takes the source of an image as its value. The source can be either a [static asset](https://rn.nodejs.cn/docs/images#static-image-resources) or a URL. For example, the source required from **assets/images** directory is static. It can also come from [Network](https://rn.nodejs.cn/docs/images#network-images) as a `uri` property. 在 **app/(tabs)/index.tsx** 文件中使用 Image 组件： 🌐 To use the Image component in **app/(tabs)/index.tsx** file: 1. 从 `expo-image` 库中导入 `Image`。 2. 创建一个 `PlaceholderImage` 变量，将 **assets/images/background-image.png** 文件作为 `Image` 组件的 `source` 属性使用。 ```tsx import { View, StyleSheet } from 'react-native'; import { Image } from 'expo-image'; const PlaceholderImage = require('@/assets/images/background-image.png'); export default function Index() { return ( ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#25292e', alignItems: 'center', }, imageContainer: { flex: 1, }, image: { width: 320, height: 440, borderRadius: 18, }, }); ``` ## 将组件划分到文件中 🌐 Divide components into files 随着我们向这个界面添加更多组件，让我们把代码分成多个文件。在整个教程中，我们将使用 components 目录来创建自定义组件。 🌐 Let's divide the code into multiple files as we add more components to this screen. Throughout this tutorial, we'll use the components directory to create custom components. 1. 创建一个顶层的 **components** 目录，并在其中创建 **ImageViewer.tsx** 文件。 2. 将显示图片的代码与 `image` 样式一起移动到此文件中。 ```tsx import { ImageSourcePropType, StyleSheet } from 'react-native'; import { Image } from 'expo-image'; type Props = { imgSource: ImageSourcePropType; }; export default function ImageViewer({ imgSource }: Props) { return ; } const styles = StyleSheet.create({ image: { width: 320, height: 440, borderRadius: 18, }, }); ``` > **信息** 由于 **ImageViewer** 是一个自定义组件，我们将其放在单独的目录中，而不是 **app** 目录中。**app** 目录中的每个文件要么是布局文件，要么是路由文件。更多信息，请参见 [非导航组件位于 app 目录之外](/router/basics/core-concepts.md#5-non-navigation-components-live-outside-of-app-directory)。导入 `ImageViewer` 并在 **app/(tabs)/index.tsx** 中使用它： 🌐 Import `ImageViewer` and use it in the **app/(tabs)/index.tsx**: ```tsx import { StyleSheet, View } from 'react-native'; import ImageViewer from '@/components/ImageViewer'; const PlaceholderImage = require('@/assets/images/background-image.png'); export default function Index() { return ( ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#25292e', alignItems: 'center', }, imageContainer: { flex: 1, }, }); ``` #### 导入语句中的 @ 是什么？ `@` 符号是一个自定义的 [路径别名](/guides/typescript.md#path-aliases-optional)，用于导入自定义组件和其他模块，而不是使用相对路径。Expo CLI 会自动在 **tsconfig.json** 中配置它。 🌐 The `@` symbol is a custom [path alias](/guides/typescript.md#path-aliases-optional) for importing custom components and other modules instead of relative paths. Expo CLI automatically configures it in **tsconfig.json**. ## 使用 Pressable 创建按钮 🌐 Create buttons using Pressable React Native 包含几种用于处理触摸事件的不同组件，但 [``](https://rn.nodejs.cn/docs/pressable) 因其灵活性而被推荐。它可以检测单次点击、长按，当按钮按下和释放时触发不同的事件，等等。 🌐 React Native includes a few different components for handling touch events, but [``](https://rn.nodejs.cn/docs/pressable) is recommended for its flexibility. It can detect single taps, long presses, trigger separate events when the button is pushed in and released, and more. 在设计中，我们需要创建两个按钮。每个按钮都有不同的样式和标签。让我们先为这些按钮创建一个可复用的组件。在 **components** 目录下创建一个 **Button.tsx** 文件，并使用以下代码： 🌐 In the design, there are two buttons we need to create. Each has a different style and label. Let's start by creating a reusable component for these buttons. Create a **Button.tsx** file inside the **components** directory with the following code: ```tsx import { StyleSheet, View, Pressable, Text } from 'react-native'; type Props = { label: string; }; export default function Button({ label }: Props) { return ( alert('You pressed a button.')}> {label} ); } const styles = StyleSheet.create({ buttonContainer: { width: 320, height: 68, marginHorizontal: 20, alignItems: 'center', justifyContent: 'center', padding: 3, }, button: { borderRadius: 10, width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center', flexDirection: 'row', }, buttonLabel: { color: '#fff', fontSize: 16, }, }); ``` 当用户点击屏幕上的任意按钮时，应用会显示一个提示。这是因为 `` 在其 `onPress` 属性上调用了 `alert()`。让我们将这个组件导入到 **app/(tabs)/index.tsx** 文件中，并为包含这些按钮的 `` 添加样式： 🌐 The app displays an alert when the user taps any of the buttons on the screen. It happens because `` calls `alert()` on its `onPress` prop. Let's import this component into **app/(tabs)/index.tsx** file and add styles for the `` that encapsulates these buttons: ```tsx import { View, StyleSheet } from 'react-native'; import Button from '@/components/Button'; import ImageViewer from '@/components/ImageViewer'; const PlaceholderImage = require("@/assets/images/background-image.png"); export default function Index() { return (

`、`

` 和 ``。在开发 Web 应用时，RNW 是可选的，因为你可以直接使用 React DOM，但我们通常建议在跨平台构建时使用它，因为它可以最大化代码重用。 > React Native for web 被用来驱动整个 [X](https://x.com/) 网站。 #### Web-only 或者，你可以编写仅用于网页的 React DOM 组件，例如 `

`、`

` 等，但这些组件无法在原生平台上渲染。 ```jsx export default function Page() { return

Home page

; } ``` Expo 完全支持构建仅适用于网页的组件，但你可能希望组织代码，以更好地支持同时为网页和原生平台构建。更多信息请参见 [平台特定模块](/router/advanced/platform-specific-modules.md)。 Expo SDK 中的所有库都是为了支持浏览器和服务器渲染环境（如适用）而构建的。这些库也针对它们所面向的各个平台进行了优化。 🌐 All of the libraries in the Expo SDK are built to support both browser and server rendering environments (when applicable). Libraries are also optimized for the individual platforms they target. 开发功能如快速刷新、调试、环境变量和[打包](/guides/customizing-metro.md)也都是完全通用的，从而实现统一的开发者体验。Expo CLI在构建生产版本时会**自动为各个平台优化代码**，使用诸如[平台摇树优化](/guides/tree-shaking.md#platform-shaking)等技术。 🌐 Development features like Fast Refresh, debugging, environment variables, and [bundling](/guides/customizing-metro.md) are also fully universal, enabling a unified developer experience. Expo CLI **automatically optimizes code** for individual platforms when you build for production, using techniques like [platform shaking](/guides/tree-shaking.md#platform-shaking). ## 入门 🌐 Getting started ### 安装网络依赖 🌐 Install web dependencies ```sh # npm npx expo install react-dom react-native-web @expo/metro-runtime # yarn yarn expo install react-dom react-native-web @expo/metro-runtime # pnpm pnpm expo install react-dom react-native-web @expo/metro-runtime # bun bun expo install react-dom react-native-web @expo/metro-runtime ``` #### 你的应用还没有使用 expo 包吗？如果你还没有将 Expo 添加到你的 React Native 应用中，你可以选择[安装 Expo 模块](/bare/installing-expo-modules.md)（推荐）或者只安装 `expo` 包并配置应用入口文件。这将允许你针对 Web 平台，但不会包含对 Expo SDK 的支持。 🌐 If you haven't added Expo to your React Native app yet, you can either [install Expo modules](/bare/installing-expo-modules.md) (recommended) or just install the `expo` package and configure the app entry file. This will allow you to target web, but it will not include support for the Expo SDK. 1. 在你的项目中安装 [Expo CLI](/more/expo-cli.md)： ```sh # npm npm install expo # yarn yarn add expo # pnpm pnpm add expo # bun bun add expo ``` 2. 修改入口文件以使用 [`registerRootComponent`](/versions/latest/sdk/expo.md#registerrootcomponentcomponent) 替代 `AppRegistry.registerComponent`： ```diff - import {AppRegistry} from 'react-native'; - import {name as appName} from './app.json'; + import {registerRootComponent} from 'expo'; import App from './App'; - AppRegistry.registerComponent(appName, () => App); + registerRootComponent(App); ``` ### 启动开发服务器 🌐 Start the dev server 你现在可以启动开发服务器，并在浏览器中进行开发，使用： 🌐 You can now start the dev server and develop in the browser with: ```sh # npm npx expo start --web # yarn yarn expo start --web # pnpm pnpm expo start --web # bun bun expo start --web ``` 该应用可以导出为具有以下功能的生产网站： 🌐 The app can be exported as a production website with: ```sh # npm npx expo export --platform web # yarn yarn expo export --platform web # pnpm pnpm expo export --platform web # bun bun expo export --platform web ``` ## 下一章 🌐 Next [基于文件的路由](/router/introduction.md) — 使用 Expo Router 构建路由和导航。 [静态渲染和 SEO](/router/web/static-rendering.md) — 使用 Expo Router 将你的网站渲染为静态 HTML，以提高 SEO 和性能。 [使用 EAS Hosting 立即部署](/eas/hosting/get-started.md) — EAS Hosting 是部署你的 Expo Router 和 React Native 网页应用的最佳方式，支持自定义域名、SSL 等功能。 [自定义 JavaScript 打包器](/guides/customizing-metro.md) — 为你的项目自定义 Metro 打包器。 --- --- modificationDate: May 12, 2026 title: 发布网站 description: 了解如何部署 Expo 网站进行生产。 --- This documentation is available as Markdown for AI agents and LLMs. See the [full Markdown index](/llms.txt) or append .md to any documentation URL. # 发布网站了解如何部署 Expo 网站进行生产。 Expo Web 应用可以在本地运行以测试生产环境的行为，也可以部署到托管服务。我们建议部署到 [EAS Hosting](/eas/hosting.md) 以获得最佳功能支持。你也可以自行托管或使用第三方服务。 🌐 An Expo web app can be served locally for testing the production behavior, and deployed to a hosting service. We recommend deploying to [EAS Hosting](/eas/hosting.md) for the best feature support. You can also self-host or use a third-party service. [使用 EAS 立即部署](/eas/hosting/get-started.md) — EAS Hosting 是部署你的网络应用的最佳方式，支持自定义域名、SSL 等功能。 > 对于 SDK 49 及更早版本，你可能需要参考 [发布 `webpack` 构建的指南](/archive/publishing-websites-webpack.md)。 ## 产出目标 🌐 Output targets 可以在 [应用配置](/workflow/configuration.md) 中配置 [`web.output`](/versions/latest/config/app.md#output) 目标，以设置 Web 应用的导出方法： 🌐 The [`web.output`](/versions/latest/config/app.md#output) target can be configured in the [app config](/workflow/configuration.md) to set the export method for the web app: ```json { "expo": { "web": { "output": "server", "bundler": "metro" } } } ``` Expo Router 支持 Web 应用的三个输出目标。 🌐 Expo Router supports three output targets for web apps. | 输出 | Expo 路由 | API 路由 | 描述 | | --- | --- | --- | --- | | `single`（默认） | ✓ | ✗ | 在输出目录中输出单页面应用（SPA），包含单个 **index.html**，并且没有可静态索引的 HTML。 | | `server` | ✓ | ✓ | 创建 **client** 和 **server** 目录。客户端文件作为独立的 HTML 文件输出。API 路由作为单独的 JavaScript 文件输出，用于在自定义 Node.js 服务器上托管。 | | `static` | ✓ | ✗ | 为 **app** 目录中的每个路由输出独立的 HTML 文件。 | > **信息** **注意**：对于 `static` 和 `server` 输出模式，你可以通过 `expo-router` 插件配置[全局 HTTP 头](/router/web/server-headers.md)，这些头将应用于所有路由响应。 ## 创建构建 🌐 Create a build 创建项目的构建是发布 Web 应用的第一步。无论你是想在本地提供服务还是部署到托管服务，都需要导出项目的所有 JavaScript 和资源。这被称为静态包。可以通过运行以下命令来导出它： 🌐 Creating a build of the project is the first step to publishing a web app. Whether you want to serve it locally or deploy to a hosting service, you'll need to export all JavaScript and assets of a project. This is known as a static bundle. It can be exported by running the following command: 运行通用导出命令来编译 Web 项目： 🌐 Run the universal export command to compile the project for web: ```sh # npm npx expo export -p web # yarn yarn expo export -p web # pnpm pnpm expo export -p web # bun bun expo export -p web ``` 生成的项目文件位于 **dist** 目录中。**public** 目录中的任何文件也会被复制到 **dist** 目录中。 🌐 The resulting project files are located in the **dist** directory. Any files inside the **public** directory are also copied to the **dist** directory. > **警告** 某些路径例如 `/assets` 已被 Metro 保留。避免将文件放在 **public/assets/** 或其他保留路径中。完整列表请参见 [保留路径](/router/reference/reserved-paths.md)。 ## 本地服务 🌐 Serve locally 使用 `npx expo serve` 可以快速在本地测试你的网站在生产环境中的托管情况。运行以下命令来提供静态资源包： 🌐 Use `npx expo serve` to quickly test locally how your website will be hosted in production. Run the following command to serve the static bundle: ```sh # npm npx expo serve # yarn yarn expo serve # pnpm pnpm expo serve # bun bun expo serve ``` 打开 [`http://localhost:8081`](http://localhost:8081) 查看你的项目实际效果。这是 **仅限 HTTP**，因此权限、相机、位置以及许多其他安全功能可能无法正常工作。 🌐 Open [`http://localhost:8081`](http://localhost:8081) to see your project in action. This is **HTTP only**, so permissions, camera, location, and many other secure features may not work as expected. ## 使用 EAS 托管 🌐 Hosting with EAS 当你准备好投入生产时，你可以立即使用 EAS CLI 部署你的网站。 🌐 When you're ready to go to production, you can instantly deploy your website with EAS CLI. [使用 EAS 立即部署](/eas/hosting/get-started.md) — EAS Hosting 是部署你的网络应用的最佳方式，支持自定义域名、SSL 等功能。 ## 托管在第三方服务上 🌐 Hosting on third-party services ### Netlify [Netlify](https://www.netlify.com/) 是一个几乎不带偏见的 Web 应用部署平台。它与 Expo Web 应用的兼容性最高，因为它对框架几乎没有任何假设。 #### 使用 Netlify CDN 手动部署 🌐 Manual deployment with the Netlify CDN 通过运行以下命令安装 Netlify CLI： 🌐 Install the Netlify CLI by running the following command: ```sh # npm npm install --global netlify-cli # yarn yarn global add netlify-cli # pnpm pnpm add --global netlify-cli # bun bun add --global netlify-cli ``` 为单页应用配置重定向。 🌐 Configure redirects for single-page applications. > 如果你的应用使用[静态渲染](/router/web/static-rendering.md)，那么你可以跳过此步骤。 `expo.web.output: 'single'` 生成一个单页应用。这意味着只有一个 **dist/index.html** 文件，所有请求都必须重定向到该文件。在 Netlify 上，可以通过创建 **./public/_redirects** 文件并将所有请求重定向到 **/index.html** 来实现。 ```sh /* /index.html 200 ``` 如果你修改此文件，必须使用 `npx expo export -p web` 重新构建项目，以便它能够安全地复制到 **dist** 目录中。 🌐 If you modify this file, you must rebuild your project with `npx expo export -p web` to have it safely copied into the **dist** directory. 通过运行以下命令来部署 web 构建目录： 🌐 Deploy the web build directory by running the following command: ```sh netlify deploy --dir dist ``` 你将看到一个可以用来在线查看你项目的链接。 🌐 You'll see a URL that you can use to view your project online. #### 持续交付 🌐 Continuous delivery 当你推送到 Git 或打开新的拉取请求时，Netlify 也可以进行构建和部署： 🌐 Netlify can also build and deploy when you push to git or open a new pull request: - [开始一个新的 Netlify 项目](https://app.netlify.com/signup)。 - 选择你的 Git 托管服务并选择你的仓库。 - 点击 **建立你的网站**。 ### Vercel [Vercel](https://vercel.com/) 有一个单命令部署流程。安装 [Vercel CLI](https://vercel.com/docs/cli)。 🌐 Install the [Vercel CLI](https://vercel.com/docs/cli). ```sh # npm npm install --global vercel@latest # yarn yarn global add vercel@latest # pnpm pnpm add --global vercel@latest # bun bun add --global vercel@latest ``` 为单页应用配置重定向。在你的应用根目录创建一个 **vercel.json** 文件，并添加以下配置： 🌐 Create a **vercel.json** file at the root of your app and add the following configuration: ```json { "buildCommand": "expo export -p web", "outputDirectory": "dist", "devCommand": "expo", "cleanUrls": true, "framework": null, "rewrites": [ { "source": "/:path*", "destination": "/" } ] } ``` 如果你的应用使用[静态渲染](/router/web/static-rendering.md)，那么你可能需要添加额外的[动态路由配置](/router/web/static-rendering.md#dynamic-routes)。 🌐 If your app uses [static rendering](/router/web/static-rendering.md), then you may want to add additional [dynamic route configuration](/router/web/static-rendering.md#dynamic-routes). 部署网站。 ```sh vercel ``` 现在你会看到一个可以用来在线查看项目的 URL。当构建完成后，将该 URL 粘贴到浏览器中，你就能看到已部署的应用。 🌐 You'll now see a URL that you can use to view your project online. Paste that URL into your browser when the build is complete, and you'll see your deployed app. ### AWS Amplify 控制台 🌐 AWS Amplify Console [AWS Amplify 控制台](https://console.amplify.aws) 提供了基于 Git 的工作流程，用于持续部署和托管全栈无服务器 Web 应用。Amplify 会从代码仓库而不是你的电脑部署你的 PWA。在本指南中，我们将使用 GitHub 仓库。开始之前，请先[在 GitHub 上创建一个新的仓库](https://github.com/new) 。 🌐 The [AWS Amplify Console](https://console.amplify.aws) provides a Git-based workflow for continuously deploying and hosting full-stack serverless web apps. Amplify deploys your PWA from a repository instead of from your computer. In this guide, we'll use a GitHub repository. Before starting, [create a new repo on GitHub](https://github.com/new). 将 [**amplify-explicit.yml**](https://github.com/expo/amplify-demo/blob/master/amplify-explicit.yml) 文件添加到仓库的根目录。确保已从 **.gitignore** 文件中移除生成的 **dist** 目录，并提交这些更改。 🌐 Add the [**amplify-explicit.yml**](https://github.com/expo/amplify-demo/blob/master/amplify-explicit.yml) file to the root of your repository. Ensure you have removed the generated **dist** directory from the **.gitignore** file and committed those changes. 将本地 Expo 项目推送到 GitHub 仓库。如果你还没有推送到 GitHub，请按照 [GitHub 关于将现有项目添加到 GitHub 的指南](https://docs.github.com/en/get-started/importing-your-projects-to-github/importing-source-code-to-github/adding-locally-hosted-code-to-github) 操作。 🌐 Push your local Expo project to a GitHub repository. If you haven't pushed to GitHub yet, follow [GitHub's guide to add an existing project to GitHub](https://docs.github.com/en/get-started/importing-your-projects-to-github/importing-source-code-to-github/adding-locally-hosted-code-to-github). 登录 [Amplify 控制台](https://console.aws.amazon.com/amplify/home)，选择一个现有应用或创建一个新应用。授予 Amplify 权限以读取你的 GitHub 账户或拥有你仓库的组织。 🌐 Login to the [Amplify Console](https://console.aws.amazon.com/amplify/home) and select an existing app or create a new app. Grant Amplify permission to read from your GitHub account or the organization that owns your repo. 添加你的仓库，选择分支，然后选择 **Connecting a monorepo?** 来输入你应用的 **dist** 目录路径，并选择 **Next**。 🌐 Add your repo, select the branch, and select **Connecting a monorepo?** to enter the path to your app's **dist** directory and choose **Next**. Amplify 控制台会检测到你项目中的 **amplify.yml** 文件。请选择 **允许 AWS Amplify 自动部署项目根目录中托管的所有文件**，然后点击 **下一步**。 🌐 The Amplify Console will detect the **amplify.yml** file in your project. Select **Allow AWS Amplify to automatically deploy all files hosted in your project root directory** and choose **Next**. 查看你的设置并选择 **保存并部署**。你的应用现在将部署到 `https://branchname.xxxxxx.amplifyapp.com` URL。你现在可以访问你的 Web 应用，部署另一个分支，或在你的 Expo 移动和 Web 应用之间添加统一的后端环境。 🌐 Review your settings and choose **Save and deploy**. Your app will now be deployed to a `https://branchname.xxxxxx.amplifyapp.com` URL. You can now visit your web app, deploy another branch, or add a unified backend environment across your Expo mobile and web apps. 按照 **了解如何充分利用 Amplify Hosting** 下拉菜单中的步骤操作，以 **添加带免费 SSL 证书的自定义域** 以及获取更多信息。 🌐 Follow the steps in the **Learn how to get the most out of Amplify Hosting** drop-down to **Add a custom domain with a free SSL certificate** and more information. ### Firebase 托管 🌐 Firebase hosting [Firebase Hosting](https://console.firebase.google.com/) 是面向 Web 项目的生产级 Web 内容托管服务。通过 [Firebase 控制台](https://console.firebase.google.com) 创建一个 Firebase 项目，并按照这些 [说明](https://firebase.google.com/docs/hosting) 安装 Firebase CLI。 🌐 Create a firebase project with the [Firebase Console](https://console.firebase.google.com) and install the Firebase CLI by following these [instructions](https://firebase.google.com/docs/hosting). 使用 CLI，通过运行以下命令登录到你的 Firebase 账户： 🌐 Using the CLI, login to your Firebase account by running the command: ```sh firebase login ``` 然后，通过运行以下命令初始化你的 Firebase 项目以进行托管： 🌐 Then, initialize your firebase project to host by running the command: ```sh firebase init ``` 设置将取决于你如何搭建你的 Expo 网站： 🌐 The settings will depend on how you built your Expo website: 1. 当被问及公共路径时，务必指定 **dist** 目录。 2. 当提示 **配置为单页应用（将所有 URL 重写为 /index.html）** 时，只有在使用 `web.output: "single"`（默认）时才选择 **是**。否则，请选择 **否**。在现有的 **package.json** 的 `scripts` 属性中，添加 `predeploy` 和 `deploy` 属性。它们各自的值如下: 🌐 In the existing `scripts` property of **package.json**, add `predeploy` and `deploy` properties. Each has the following values: ```json "scripts": { ... "predeploy": "expo export -p web", "deploy-hosting": "npm run predeploy && firebase deploy --only hosting", } ``` 要部署，请运行以下命令： 🌐 To deploy, run the following command: ```sh # npm npm run deploy-hosting # yarn yarn run deploy-hosting # pnpm pnpm run deploy-hosting # bun bun run deploy-hosting ``` 从控制台输出中打开 URL 以检查你的部署，例如：`https://project-name.firebaseapp.com`。 🌐 Open the URL from the console output to check your deployment, for example: `https://project-name.firebaseapp.com`. 如果你想更改宿主的标题，请在 **firebase.json** 中为 `hosting` 部分添加以下配置： 🌐 In case you want to change the header for hosting add the following config for `hosting` section in **firebase.json**: ```json "hosting": [ { ... "headers": [ { "source": "/**", "headers": [ { "key": "Cache-Control", "value": "no-cache, no-store, must-revalidate" } ] }, { "source": "**/*.@(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|woff2|font.css)", "headers": [ { "key": "Cache-Control", "value": "max-age=604800" } ] } ], } ] ``` ### GitHub 页面 🌐 GitHub Pages [GitHub Pages](https://pages.github.com/) 允许你直接从 GitHub 仓库发布网站。首先在你的项目中初始化一个新的 git 仓库，并将其配置为推送到 GitHub 仓库。如果你已经在与 GitHub 仓库同步你的更改，可以跳过此步骤。 🌐 Start by initializing a new git repository in your project and configuring it to push to a GitHub repository. If you are already syncing your changes with a GitHub repository, skip this step. 在 GitHub 网站上创建一个仓库。然后，在项目的根目录下运行以下命令： 🌐 Create a repository on the GitHub website. Then, run the following commands in your project's root directory: ```sh git init git remote add origin https://github.com/username/expo-gh-pages.git ``` 上述命令会初始化一个新的 Git 仓库，并将其配置为将你的源代码推送到指定的 GitHub 仓库。 🌐 The above commands initialize a new Git repository and configure it to push your source code to the specified GitHub repository. 在你的项目中将 `gh-pages` 包作为开发依赖安装： 🌐 Install the `gh-pages` package as a development dependency in your project: ```sh # npm npm install --save-dev gh-pages # yarn yarn add -D gh-pages # pnpm pnpm add -D gh-pages # bun bun add -D gh-pages ``` 要部署该项目，请在 [应用配置](/workflow/configuration.md) 中使用 [`baseUrl`](/versions/latest/config/app.md#baseurl) 属性将其配置到子域名。将其值设置为字符串 `/repo-name`。 🌐 To deploy the project, configure it to a subdomain with the [`baseUrl`](/versions/latest/config/app.md#baseurl) property in [app config](/workflow/configuration.md). Set its value to the string `/repo-name`. 例如，如果 GitHub 仓库是 `expo-gh-pages`，则 [实验性的 `baseUrl` 属性](/more/expo-cli.md#hosting-with-sub-paths) 的值将如下所示： 🌐 For example, if the GitHub repository is `expo-gh-pages`, the following will be the value of the [experimental `baseUrl` property](/more/expo-cli.md#hosting-with-sub-paths): ```json { "expo": { "experiments": { "baseUrl": "/expo-gh-pages" } } } ``` 通过添加 `predeploy` 和 `deploy` 脚本来修改 **package.json** 文件中的 `scripts`。每个脚本都有其各自的值： 🌐 Modify the `scripts` in the **package.json** file by adding `predeploy` and `deploy` scripts. Each has its own value: ```json "scripts": { ... "deploy": "gh-pages --nojekyll -d dist", "predeploy": "expo export -p web" } ``` 由于 Expo 在生成的文件中使用下划线，你需要使用 `--nojekyll` 标志来禁用 Jekyll。 🌐 Since Expo uses underscores in generated files, you need to disable Jekyll with the `--nojekyll` flag. 要生成 Web 应用的生产版本并将其部署到 GitHub Pages，请运行以下命令： 🌐 To generate a production build of the web app and deploy it to GitHub Pages, run the following command: ```sh # npm npm run deploy # yarn yarn run deploy # pnpm pnpm run deploy # bun bun run deploy ``` 这会将 Web 应用的构建发布到你 GitHub 仓库的 `gh-pages` 分支。该分支仅包含来自 **dist** 目录的构建产物，以及由 `gh-pages` 生成的 **.nojekyll** 文件。不包括开发源代码。 🌐 This publishes a build of the web app to the `gh-pages` branch of your GitHub repository. This branch only contains build artifacts from the **dist** directory, plus the **.nojekyll** file generated by `gh-pages`. It does not include development source code. 现在网页应用已经发布到 `gh-pages` 分支，请配置 GitHub Pages 从该分支提供应用。 🌐 Now that the web app is published to the `gh-pages` branch, configure GitHub Pages to serve the app from that branch. - 导航到 GitHub 仓库的 **设置** 选项卡。 - 向下滚动到 **页面** 部分。 - 确保 **Source** 设置为 **从分支部署**。 - 在 **Branch** 部分，选择 **gh-pages** 分支和 **root** 目录。 - 点击 **保存**。一旦网页应用发布并且 GitHub Pages 配置完成，GitHub Action 会部署你的网站。你可以通过导航到仓库的 **Actions** 选项卡来监控其进度。完成后，你的网页应用将可通过 URL `http://username-on-github.github.io/repo-name` 访问。 🌐 Once the web app is published and the GitHub Pages configuration is set, a GitHub Action will deploy your website. You can monitor its progress by navigating to your repository's **Actions** tab. Upon completion, your web app will be available at the URL `http://username-on-github.github.io/repo-name`. 对于后续的部署和更新，请运行 `deploy` 命令，GitHub Action 将会自动启动以更新你的网页应用。 🌐 For subsequent deployments and updates, run the `deploy` command and the GitHub Action will start automatically to update your web app. --- --- modificationDate: May 12, 2026 title: 在 Expo 原生应用中使用 React DOM description: 了解如何在 Expo 原生应用中使用 'use dom' 指令渲染 React DOM 组件。 --- This documentation is available as Markdown for AI agents and LLMs. See the [full Markdown index](/llms.txt) or append .md to any documentation URL. # 在 Expo 原生应用中使用 React DOM 了解如何在 Expo 原生应用中使用 'use dom' 指令渲染 React DOM 组件。 Expo 提供了一种新方法，通过 `'use dom'` 指令直接在原生应用中使用现代网页代码。这使得可以通过按组件迁移的方式，实现整个网站向通用应用的渐进式迁移。 🌐 Expo offers a novel approach to work with modern web code directly in a native app via the `'use dom'` directive. This enables incremental migration for an entire website to a universal app by moving on a per-component basis. 虽然 Expo 原生运行时通常不支持像 `

` 或 `` 这样的元素，但有时你可能需要快速集成 Web 组件。在这种情况下，DOM 组件提供了一个有用的解决方案。 🌐 While the Expo native runtime generally does not support elements like `

` or ``, there may be instances where you need to quickly incorporate web components. In such cases, DOM components provide a useful solution. #### 先决条件 ##### Expo SDK 55及更早版本：react-native-webview #### SDK 56 and later DOM 组件默认使用 [`@expo/dom-webview`](https://www.npmjs.com/package/@expo/dom-webview)，无需额外安装。 #### 如何选择退出 @expo/dom-webview 并改用 react-native-webview？ If you want to use `react-native-webview` instead, install it and opt out via the `dom` prop: ```sh # npm npx expo install react-native-webview # yarn yarn expo install react-native-webview # pnpm pnpm expo install react-native-webview # bun bun expo install react-native-webview ``` ```tsx import DOMComponent from './my-component'; export default function App() { return ; } ``` #### SDK 55 and earlier 在你的项目中安装 `react-native-webview`： ```sh # npm npx expo install react-native-webview # yarn yarn expo install react-native-webview # pnpm pnpm expo install react-native-webview # bun bun expo install react-native-webview ``` ##### Expo CLI 和 Expo Metro 配置如果你已经使用 `npx expo [command]` 运行你的项目（例如，如果你是用 `npx create-expo-app` 创建的），你已经准备好了。如果你的项目中还没有 `expo` 包，请通过运行以下命令来安装它，并且[选择使用 Expo CLI 和 Metro 配置](/bare/installing-expo-modules.md#configure-expo-cli-for-bundling-on-android-and-ios)： ```sh # npm npx install-expo-modules@latest # yarn yarn dlx install-expo-modules@latest # pnpm pnpm dlx install-expo-modules@latest # bun bunx install-expo-modules@latest ``` 如果命令失败，请参考[安装 Expo 模块](/bare/installing-expo-modules.md#manual-installation)指南。 ##### Expo Metro 运行时、React DOM 和 React Native Web 如果你正在使用 Expo Router 和 Expo Web，你可以跳过此步骤。否则，请安装以下软件包： ```sh # npm npx expo install @expo/metro-runtime react-dom react-native-web # yarn yarn expo install @expo/metro-runtime react-dom react-native-web # pnpm pnpm expo install @expo/metro-runtime react-dom react-native-web # bun bun expo install @expo/metro-runtime react-dom react-native-web ``` ## 用法 🌐 Usage 要将 React 组件渲染到 DOM，请在 web 组件文件的顶部添加 `'use dom'` 指令： 🌐 To render a React component to the DOM, add the `'use dom'` directive to the top of the web component file: ```tsx 'use dom'; export default function DOMComponent({ name }: { name: string }) { return (

Hello, {name}

); } ``` 在本地组件文件中，导入 web 组件以使用它： 🌐 Inside the native component file, import the web component to use it: ```tsx import DOMComponent from './my-component.tsx'; export default function App() { return ( // This is a DOM component. It re-exports a wrapped `react-native-webview` behind the scenes. ); } ``` ## 特性 🌐 Features - 在 Web、原生和 DOM 组件之间共享打包器配置。 - 在 DOM 组件中已启用 React、TypeScript、CSS 以及所有其他 Metro 功能。 - 在终端和 Safari/Chrome 中进行调试日志记录。 - 快速刷新和热模块替换。 - 用于离线支持的嵌入式导出。 - 资源在网页和原生应用中实现统一。 - DOM 组件包可以在 [Expo Atlas](/guides/analyzing-bundles.md#analyzing-bundle-size-with-atlas) 中进行检查以进行调试。 - 无需本地重建即可访问所有网络功能。 - 开发中运行时错误覆盖 - 支持 Expo Go。 ## WebView 属性 🌐 WebView props 要将属性传递给底层的原生 **WebView**，请在组件上使用 `dom` 属性。该属性内置于每个 DOM 组件中，并接受一个对象，其中包含你希望更改的任何 [`WebView` 属性](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md)。 🌐 To pass props to the underlying native **WebView**, use the `dom` prop on the component. This prop is built into every DOM component and accepts an object with any [`WebView` props](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md) that you would like to change. ```tsx import DOMComponent from './my-component'; export default function App() { return ( ); } ``` 在你的 DOM 组件上，添加 `dom` 属性，这样 TypeScript 就能识别它： 🌐 On your DOM component, add the `dom` prop so it is recognized in TypeScript: ```tsx 'use dom'; export default function DOMComponent({}: { dom: import('expo/dom').DOMProps }) { return (

Hello, world!

); } ``` ## 编组属性 🌐 Marshalled props 你可以通过可序列化属性（`number`、`string`、`boolean`、`null`、`undefined`、`Array`、`Object`）向 DOM 组件发送数据。例如，在原生组件文件中，你可以向 DOM 组件传递一个属性： 🌐 You can send data to the DOM component through serializable props (`number`, `string`, `boolean`, `null`, `undefined`, `Array`, `Object`). For example, inside a native component file, you can pass a prop to the DOM component: ```tsx import DOMComponent from './my-component'; export default function App() { return ; } ``` 在 web 组件文件中，你可以像下面的示例一样接收 prop： 🌐 Inside the web component file, you can receive the prop as shown in the example below: ```tsx 'use dom'; export default function DOMComponent({ hello }: { hello: string }) { return

Hello, {hello}

; } ``` 属性通过异步桥传递，因此它们不会同步更新。它们作为属性传递给 React 根组件，这意味着它们会重新渲染整个 React 树。 🌐 Props are sent over an asynchronous bridge so they are not updated synchronously. They are passed as props to the React root component, which means they re-render the entire React tree. ## 本地操作 🌐 Native actions 你可以通过将异步函数作为顶层属性传递给 DOM 组件，将类型安全的原生函数发送到 DOM 组件： 🌐 You can send type-safe native functions to DOM components by passing asynchronous functions as top-level props to the DOM component: ```tsx import DomComponent from './my-component'; export default function App() { return ( { console.log('Hello', data); }} /> ); } ``` ```tsx 'use dom'; export default function MyComponent({ hello }: { hello: (data: string) => Promise }) { return

hello('world')}>Click me

; } ``` > 你不能将函数作为嵌套属性传递给 DOM 组件。它们必须是顶层属性。原生操作总是异步的，并且只接受可序列化的参数（意味着不能是函数），因为数据会通过桥接发送到 DOM 组件的 JavaScript 引擎。 🌐 Native actions are always asynchronous and accept only serializable arguments (meaning no functions) because the data is sent over a bridge to the DOM component's JavaScript engine. 原生操作可以向 DOM 组件返回可序列化的数据，这对于从原生端获取数据非常有用。 🌐 Native actions can return serializable data to the DOM component, which is useful for getting data back from the native side. ```tsx getDeviceName(): Promise { return DeviceInfo.getDeviceName(); } ``` 把这些函数想象成 React 服务器函数，但它们不是驻留在服务器上，而是本地存在于原生应用中，并与 DOM 组件通信。这种方法为你的 DOM 组件提供了一种强大的方式来添加真正的原生功能。 🌐 Think of these functions like React Server Functions, but instead of residing on the server, they live locally in the native app and communicate with the DOM component. This approach provides a powerful way to add truly native functionality to your DOM components. ## 传递引用 🌐 Passing refs > **重要** 这是 [alpha](/more/release-statuses.md#alpha) 版本，将来可能会有所更改。你可以在 DOM 组件中使用 `useDOMImperativeHandle` 钩子来接受来自原生端的 ref 调用。这个钩子类似于 React 的 [`useImperativeHandle`](https://react.nodejs.cn/reference/react/useImperativeHandle) 钩子，但它不需要传入 ref 对象。 🌐 You can use the `useDOMImperativeHandle` hook inside a DOM component to accept ref calls from the native side. This hook is similar to React's [`useImperativeHandle`](https://react.nodejs.cn/reference/react/useImperativeHandle) hook, but it does not need a ref object to be passed to it. ```tsx import { useRef } from 'react'; import { Button, View } from 'react-native'; import MyComponent, { type DOMRef } from './my-component'; export default function App() { const ref = useRef(null); return (