Expo UI

Flexbox 样式适用于 Host 组件本身。一旦进入原生环境，Yoga 就不可用了。在 Android 上使用 Row 和 Column 定义布局，或者在 iOS 上使用 HStack 和 VStack。

🌐 Flexbox styles apply to the Host component itself. Once you are inside the native context, Yoga is not available. Define layouts with Row and Column on Android, or HStack and VStack on iOS.

Host 是 React Native 和原生 UI 工具包之间的桥梁。你必须用它来封装每一个 Expo UI 组件。你可以把它想成 DOM 里的 <svg> 或者 <Canvas> 在 react-native-skia 里的作用。在 iOS 上，它使用 UIHostingController 在 UIKit 中渲染 SwiftUI 视图。想要跨平台使用的话，可以看看通用的 Host。

Expo UI 不是“又一个”UI库，也不是一个有固定设计风格的设计工具包。它是一个基础组件库。它直接将原生的 Jetpack Compose 和 SwiftUI 组件暴露给 JavaScript，而不是在 JavaScript 中重新实现或模拟UI。

🌐 Expo UI is not "yet another" UI library and not an opinionated design kit. Instead, it's a primitives library. It exposes native Jetpack Compose and SwiftUI components directly to JavaScript, rather than re-implementing or simulating UI in JavaScript.

不行。@expo/ui/swift-ui 渲染的是 SwiftUI 视图，只存在于 Apple 平台上。安卓的话用 @expo/ui/jetpack-compose。如果你想要一个适用于 Android、iOS 和网页的统一组件树，就用 通用组件。

🌐 No. @expo/ui/swift-ui renders SwiftUI views, which exist only on Apple platforms. Use @expo/ui/jetpack-compose for Android. Use the universal components when you want one component tree for Android, iOS, and web.

是的，你可以将 React Native 组件作为 JSX 子组件放置在 Expo UI 组件中。Expo UI 会自动为你创建一个 UIViewRepresentable 封装器。 然而，请记住，SwiftUI 布局系统的工作方式与 UIKit 不同，并且存在一些限制。根据苹果的文档:

🌐 Yes, you can place React Native components as JSX children of Expo UI components. Expo UI automatically creates a UIViewRepresentable wrapper for you. However, keep in mind that the SwiftUI layout system works differently from UIKit and has some limitations. According to Apple's documentation:

警告 SwiftUI 完全控制 UIKit 视图的 center、bounds、frame 和 transform 属性的布局。不要在你自己的代码中直接设置由 UIViewRepresentable 实例管理的视图的这些布局相关属性，因为这样会与 SwiftUI 产生冲突，并导致未定义的行为。

另外注意，一旦你渲染了 React Native 组件，就离开了 SwiftUI 的上下文。要再次添加 Expo UI 组件，需要重新引入一个 Host 封装器。

🌐 Also note that once you render React Native components, you're leaving the SwiftUI context. To add Expo UI components again, reintroduce a Host wrapper.

保持 SwiftUI 布局自成一体。虽然可以互操作，但当边界清楚时效果最好。

🌐 Keep SwiftUI layouts self-contained. Interop is possible, but it works best when boundaries are clearly defined.

React 所承诺的“学习一次，到处编写”现在也适用于 Jetpack Compose 和 SwiftUI。你可以运用现有的知识来构建在 React Native 生态系统中运行的应用。同一个应用可以通过 DOM 组件 扩展到网页，还可以使用 react-native-skia 添加 2D 渲染，或使用 react-native-webgpu 添加 3D 渲染。应用的不同部分可以使用不同的方法，因为集成是在组件级别进行的。

🌐 React's promise of "learn once, write anywhere" now extends to Jetpack Compose and SwiftUI. You can apply your existing knowledge to build apps that run in the React Native ecosystem. The same app can extend to the web through DOM components, and add 2D rendering with react-native-skia or 3D rendering with react-native-webgpu. Different parts of your app can use different approaches, because the integration works at the component level.