Expo 原生界面设计指南
帮助 Expo 开发者构建符合 Apple 设计规范、具备原生体验的响应式界面。
内容未显示恶意代码、凭证窃取、隐蔽外传或破坏性默认操作;相机、麦克风、媒体库权限请求有一定说明,且仓库 README 表示遥测默认关闭。扣分在于缺少统一的用户确认、数据流边界、失败回滚和依赖安全说明,媒体示例还使用远程资源。
覆盖面广且多数示例结构清晰,但存在明显自相矛盾:正文禁止 Picker 和 expo-symbols,controls.md 却示例化 Picker,icons.md 却使用 expo-symbols;Expo Go、SDK 和新架构兼容性说明也不完整。静态阅读无关键路径测试或异常反馈证据,因此限定在10分以下。
目标用户和主要场景明确,且声明路由应使用 expo-router;引用目录按动画、控件、媒体、存储等主题划分。扣分在于缺少明确的输入输出、非适用范围和触发边界,平台与 SDK 条件分散,未提供中文使用支持或中国大陆网络可达性说明。
有 front matter、版本号、MIT 许可、分主题参考文档和代码示例,信息架构基本清楚。扣分在于没有变更日志、明确维护责任或更新路径;依赖安装说明、故障排查、已知限制和版本兼容矩阵不足,且文档内部存在命名与规范冲突。
对构建原生感 Expo 界面提供了可直接改写的颜色、控件、动画、媒体、存储和视觉效果片段,核心任务价值明确。扣分在于若干建议或示例可能过时、互相冲突或依赖特定 SDK/平台,缺少静态之外的代表性结果验证,使用前仍需较多人工核对。
证据主要是版本化仓库中的 SKILL.md、参考文档、README、许可证和有限的 CI 检查;README 明确 Expo 文档、CLI 和 EAS CLI 才是事实来源。扣分在于 CI 仅检查描述/版本限制,不覆盖该技能的代码建议,未提供第三方复现、测试套件或关键断言,因此不超过静态上限5分。
- 修复或明确 Picker、expo-symbols、expo-image 与 expo-router 相关规则之间的冲突,并按 Expo SDK/平台标注兼容性。
- 在使用相机、麦克风、媒体库、远程媒体或存储敏感数据时,补充权限确认、数据流、错误处理和恢复策略。
- 补充依赖安装、故障排查、已知限制、维护责任、更新路径和中文/中国大陆网络环境说明。
这个 Skill 能做什么,适合哪些场景?
Expo Native UI 是一个开源 Agent Skill,用于指导 AI agent 构建原生感的 Expo 屏幕。它涵盖 Apple HIG、语义颜色、原生控件、SF Symbols、媒体、动画、视觉效果、渐变、存储和响应式布局。技能明确将路由与导航交给独立的 expo-router skill。它还指导开发者优先使用 Expo Go,并仅在需要自定义原生代码时创建自定义构建。
指导 agent 查阅动画、控件、渐变、图标、媒体、存储、视觉效果和 WebGPU/Three.js 参考资料;编写符合 Expo 与 React Native 规范的界面代码;使用 npx expo start 启动应用并优先通过 Expo Go 测试;在本地 Expo 模块、Apple targets、Expo Go 不支持的第三方原生模块或无法由 app.json 表达的原生配置存在时,使用 npx expo run:ios、npx expo run:android 或 eas build。
- 正在开发 Expo 应用、希望界面更贴近 iOS 原生体验的 React Native 开发者。
- 需要语义颜色、深色模式适配、原生控件或 SF Symbols 的移动端团队。
- 需要加入动画、手势、媒体、模糊或液态玻璃效果的 Expo 项目。
- 希望先用 Expo Go 快速验证界面、仅在必要时进行原生构建的开发者。
这个 Skill 有哪些优点和局限?
- 覆盖界面样式、颜色、控件、图标、动画、媒体、存储和视觉效果等常见 Expo UI 工作。
- 包含明确的 Expo Go 优先流程,可减少不必要的自定义构建。
- 提供具体的库选择和弃用库规避建议。
- MIT 许可,并由 Expo 官方团队维护的技能集合提供。
- 只覆盖 expo-native-ui;路由和导航不在本技能范围内。
- SKILL.md 未提供测试套件、自动验证流程或目标平台兼容性矩阵。
- 部分功能依赖特定 SDK、原生模块或新架构,例如 CSS 渐变要求 New Architecture。
- README 的安装与更新说明面向整个 23 技能集合,而非本技能单独安装。
如何安装这个 Skill?
README 记录的是整个 expo/skills 集合的安装方式。使用 Skills CLI:npx skills@latest add expo/skills --skill '*';或在 Codex 中安装集合插件:codex plugin add expo@openai-curated。README 未提供仅安装 expo-native-ui 的专用命令。
如何使用这个 Skill?
将技能安装到你的 agent 后,提出具体的 Expo UI 任务,例如:"Build a native-feeling Expo screen with semantic colors, native controls, SF Symbols, and responsive layout." 涉及 routes、links、stacks、tabs、modals、sheets 或 headers 时,应同时使用 expo-router skill。
这个 Skill 与同类方案有什么区别?
与 expo-router skill 的边界清晰:expo-native-ui 负责界面样式和原生 UI 能力,expo-router 负责路由与导航。与直接运行自定义 iOS/Android 构建相比,它建议先使用 Expo Go,仅在明确需要原生代码或配置时构建。