在 Expo 中使用 SwiftUI 构建 iOS 原生界面

解决在 React Native 中难以实现复杂 iOS 原生视觉效果的问题：通过 @expo/ui/swift-ui 插件，让 AI 能够直接在 Expo 项目中编写并集成 SwiftUI 视图和修饰符。

为什么需要这个技能

虽然 React Native 提供了强大的跨平台能力，但在某些极端性能要求或需要深度集成 iOS 原生特性的场景下，使用 SwiftUI 编写界面能提供更流畅的交互体验和更原生的视觉质感。

@expo/ui/swift-ui 库将 SwiftUI 的 API 镜像到了 JavaScript 层，这意味着开发者无需频繁地在 Swift 和 JS 之间切换上下文，就可以在 Expo SDK 55 环境下快速构建原生 iOS 界面。

适用场景

• 需要在 Expo 应用中构建纯正的 iOS 原生 UI 界面。
• 任务涉及 SwiftUI 视图（Views）的选择、修饰符（Modifiers）的应用。
• 需要将 React Native 组件嵌入到 SwiftUI 视图树中。
• 针对 Expo SDK 55 版本进行 SwiftUI 集成和扩展开发。

核心工作流

1. 环境准备

首先安装依赖并进行原生构建（因为涉及原生代码，必须重新编译）：

npx expo install @expo/ui
npx expo run:ios

2. 构建 UI 树

• 导入规则：组件从 @expo/ui/swift-ui 导入，修饰符从 @expo/ui/swift-ui/modifiers 导入。
• 必须包裹：所有的 SwiftUI 视图树必须包裹在 Host 组件中。
• 混合嵌入：如果需要在 SwiftUI 树中放入 React Native 组件（如 Pressable），必须使用 RNHostView 进行包裹。

代码示例：

import { Host, VStack, RNHostView } from "@expo-ui/swift-ui";
import { Pressable } from "react-native";

<Host matchContents>
  <VStack>
    <RNHostView matchContents>
      {/* Pressable 是 RN 组件，必须包裹在 RNHostView 中 */}
      <Pressable />
    </RNHostView>
  </VStack>
</Host>;

3. API 验证与扩展

• 文档查阅：由于 API 镜像自 SwiftUI，当不确定某个组件或修饰符的参数时，应参考 Expo 官方 SDK 55 的 SwiftUI 对应文档。
• 能力扩展：如果发现 Expo UI 缺失某个必要的 SwiftUI 视图或修饰符，可以通过创建本地 Expo 模块（Local Expo Module）进行扩展。

下载和安装

下载 expo-ui-swift-ui 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐