关于 Expo UI SwiftUI
面向 Expo SDK 55 的 SwiftUI 开发 Skill，说明如何通过 `@expo/ui` 使用 SwiftUI 风格组件与修饰符，并提示核对文档及原生模块扩展流程。
主要功能
- 01使用 `@expo/ui` 的 SwiftUI API
- 02通过 `Host` 包裹 SwiftUI 视图树
- 03查询组件与修饰符文档
- 04使用 `RNHostView` 嵌入 React Native 组件
- 05缺少 API 时考虑本地 Expo 模块扩展
适用场景
- 01在 Expo 应用中构建 SwiftUI 界面
- 02将 React Native 组件嵌入 SwiftUI 视图树
- 03确认组件或修饰符的具体用法
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/expo-ui-swiftui确认已加载。
详细介绍
此技能中的说明仅适用于 SDK 55。对于其他 SDK 版本，请参阅对应版本的 Expo UI SwiftUI 文档，以获取最准确的信息。
安装
npx expo install @expo/ui
安装后需要进行原生重建（npx expo run:ios）。
说明
- Expo UI 的 API 与 SwiftUI 的 API 相对应。请运用 SwiftUI 知识来决定使用哪些组件或修饰符。
- 从
@expo/ui/swift-ui导入组件，从@expo/ui/swift-ui/modifiers导入修饰符。 - 使用组件前，请获取其文档以确认 API：https://docs.expo.dev/versions/v55.0.0/sdk/ui/swift-ui/{component-name}/index.md
- 不确定修饰符的 API 时，请参阅文档：https://docs.expo.dev/versions/v55.0.0/sdk/ui/swift-ui/modifiers/index.md
- 每个 SwiftUI 视图树都必须包装在
Host中。 RNHostView专门用于在 SwiftUI 视图树中嵌入 RN 组件。示例：
import { Host, VStack, RNHostView } from "@expo-ui/swift-ui";
import { Pressable } from "react-native";
<Host matchContents>
<VStack>
<RNHostView matchContents>
// Here, `Pressable` is an RN component so it is wrapped in `RNHostView`.
<Pressable />
</RNHostView>
</VStack>
</Host>;
- 如果 Expo UI 中缺少所需的修饰符或 View，可以通过本地 Expo 模块扩展。请参阅：https://docs.expo.dev/guides/expo-ui-swift-ui/extending/index.md。扩展前请先与用户确认。
评论
支持 Markdown