This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.
Expo UI
一组组件，可让你直接通过 React 使用 Jetpack Compose 和 SwiftUI 构建 UI。
@expo/ui 是一组原生输入组件，可让你使用 Jetpack Compose 和 SwiftUI 构建完全原生的界面。它旨在提供典型应用所需的常用功能和组件。
功能
- 原生基元：Expo UI 不是又一个 UI 库，而是将 Jetpack Compose 和 SwiftUI 基元引入 React Native。
- 一对一映射：组件与其原生对应组件一一映射。若要浏览 Jetpack Compose 和 SwiftUI 组件目录，请参阅下方的可用组件。
- 支持完整应用：Expo UI 在组件层级进行集成。你可以用它编写整个应用，也可以一次采用一个屏幕。你还可以混用 React Native 组件、DOM 组件以及使用
react-native-skia绘制的 2D 组件。
可用平台
组件可用于以下平台：
- Jetpack Compose：使用 Jetpack Compose 组件构建原生 Android 界面
- SwiftUI：使用 SwiftUI 组件构建原生 iOS 界面
- Universal：从单一代码源构建可在 Android、iOS 和 Web 上运行的跨平台组件
如果你希望同一组件树无需修改即可在 Android、iOS 和 Web 上运行，请从 Universal 开始。如果你需要通用 API 尚未涵盖的平台专属控件、修饰符或行为，请直接使用 Jetpack Compose 或 SwiftUI。
即插即用替代方案
请参阅 即插即用替代方案，了解与热门 React Native 社区库 API 兼容的替代方案。
面向 AI 代理的 Expo Skills
如果你使用 AI 代理，请安装 Expo Skills，帮助它构建具有原生风格的屏幕：
Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android.
Build beautiful, native-feeling Expo screens.
可用组件
Jetpack Compose
SwiftUI
即插即用替代方案
Universal
常见问题
我可以在 Expo UI 组件中使用 flexbox 或其他样式吗？
Flexbox 样式会应用于 Host 组件本身。进入原生上下文后，便无法使用 Yoga。在 Android 上使用 Row 和 Column 定义布局，在 iOS 上则使用 HStack 和 VStack。
什么是 Host 组件？
Host 是 React Native 与原生 UI 工具包之间的桥梁。每个 Expo UI 组件都必须包装在一个 Host 中。你可以把它看作 DOM 中的 <svg>，或 react-native-skia 中的 <Canvas>。在 iOS 上，它使用 UIHostingController 在 UIKit 中渲染 SwiftUI 视图。跨平台用法请参阅通用版 Host。
Expo UI 与 react-native-paper 或 react-native-elements 等库有何不同？
Expo UI 不是“又一个” UI 库，也不是带有固定设计主张的设计套件。相反，它是一个基元库。它直接向 JavaScript 暴露原生 Jetpack Compose 和 SwiftUI 组件，而不是用 JavaScript 重新实现或模拟 UI。
我可以在 Android 或 Web 上使用 @expo/ui/swift-ui 吗？
不可以。@expo/ui/swift-ui 渲染的是 SwiftUI 视图，而 SwiftUI 仅存在于 Apple 平台上。Android 请使用 @expo/ui/jetpack-compose。如果你希望 Android、iOS 和 Web 共用一棵组件树，请使用通用组件。
我可以在 SwiftUI 组件中使用 React Native 组件吗？
可以，你可以将 React Native 组件作为 JSX 子元素放入 Expo UI 组件中。Expo UI 会自动为你创建一个 UIViewRepresentable 包装器。
但请注意，SwiftUI 布局系统的工作方式与 UIKit 不同，并且有一些限制。根据 Apple 的文档：
警告 SwiftUI 会完全控制 UIKit 视图的
center、bounds、frame和transform属性。请勿在自己的代码中直接设置由UIViewRepresentable实例管理的视图上的这些布局相关属性，因为这会与 SwiftUI 冲突，并导致未定义行为。
另请注意，渲染 React Native 组件后，你就离开了 SwiftUI 上下文。若要再次添加 Expo UI 组件，请重新引入 Host 包装器。
请让 SwiftUI 布局保持自包含。虽然可以互操作，但明确界定边界时效果最佳。
我是 Jetpack Compose 或 SwiftUI 开发者。为什么要学习 Expo UI？
React 所承诺的 “学一次，到处编写” 现在也适用于 Jetpack Compose 和 SwiftUI。你可以运用现有知识，在 React Native 生态系统中构建应用。同一个应用还可以通过 DOM 组件扩展到 Web，并使用 react-native-skia 添加 2D 渲染，或使用 react-native-webgpu 添加 3D 渲染。应用的不同部分可以采用不同的实现方式，因为集成是在组件层级进行的。
其他资源
最新的 Expo UI 示例。
一个使用 Expo UI 复刻 YVR Hot Chocolate Fest 应用的示例应用。
一个展示 SDK 56 及更高版本中可用的、已达到生产就绪状态的 Expo UI 软件包的项目。该项目可在电视（Android TV、Apple TV）和移动设备（Android、iOS）上运行。演示屏幕包含 Jetpack Compose 和 SwiftUI 的大多数可用组件。