Expo UI

Flexbox 样式适用于 Host 组件本身。进入原生上下文后，Yoga 将不可用。在 Android 上使用 Row 和 Column 定义布局，在 iOS 上则使用 HStack 和 VStack。

Host 是 React Native 与原生 UI 工具包之间的桥梁。每个 Expo UI 组件都必须包裹在其中。你可以将它理解为 DOM 中的 <svg>，或 react-native-skia 中的 <Canvas>。在 iOS 上，它使用 UIHostingController 在 UIKit 中渲染 SwiftUI 视图。有关跨平台用法，请参见通用版 Host。

Expo UI 不是“又一个”UI 库，也不是带有固定设计理念的设计套件，而是一个基元库。它直接向 JavaScript 暴露原生 Jetpack Compose 和 SwiftUI 组件，而不是在 JavaScript 中重新实现或模拟 UI。

不可以。@expo/ui/swift-ui 会渲染 SwiftUI 视图，而 SwiftUI 视图仅存在于 Apple 平台上。在 Android 上使用 @expo/ui/jetpack-compose。如果你希望为 Android、iOS 和 Web 使用同一棵组件树，请使用通用组件。

可以，你可以将 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 布局保持独立。虽然可以进行互操作，但清晰定义边界时效果最好。

React 的 “学一次，随处编写” 承诺现在也扩展到了 Jetpack Compose 和 SwiftUI。你可以运用已有知识，在 React Native 生态系统中构建应用。同一个应用还可以通过 DOM 组件扩展到 Web，并使用 react-native-skia 添加 2D 渲染，或使用 react-native-webgpu 添加 3D 渲染。由于集成是在组件级别实现的，你的应用可以在不同部分采用不同方案。