使用 Expo Router 构建原生质感 UI 的指南

本技能旨在引导 AI 按照 Apple 人机界面指南（HIG）和 Expo 最新最佳实践，构建高性能、具有原生质感的应用 UI，重点解决导航结构、原生组件选择及平台适配问题。

为什么需要这个技能

在混合开发中，很多应用由于使用了自定义的 JS 模拟组件，导致在触感、过渡动画和布局上缺乏“原生感”。

通过本技能，AI 将严格遵循 Expo Router 的文件系统路由约定，优先使用原生组件（如 NativeTabs、formSheet）而非模拟组件，并采用现代样式属性（如 boxShadow、borderCurve），确保应用在 iOS 和 Android 上都能获得极致的用户体验。

适用场景

• 使用 Expo Router 构建需要高度原生体验的移动端 App。
• 需要决定何时使用 Expo Go 快速迭代，何时需要自定义原生构建（Custom Builds）。
• 实现复杂的原生导航逻辑，如模态窗（Modal）、动态表单页（Form Sheet）或 iOS 18+ 的缩放跳转（Apple Zoom）。
• 对接原生底层能力，如 SF Symbols 图标、haptics 触感反馈或 WebGPU 3D 图形。

核心工作流

1. 环境预判：优先在 Expo Go 中验证功能；仅在需要自定义原生模块、Apple Target 或特定原生配置时，才使用 npx expo run:ios/android 或 EAS Build。
2. 结构布局：
   • 路由统一存放于 app 目录，禁止将组件、类型定义与路由文件混放。
   • 使用 _layout.tsx 定义 Stack 或 NativeTabs 导航结构。
   • 根组件必须包裹在 ScrollView 中，并设置 contentInsetAdjustmentBehavior="automatic" 以智能处理安全区域。
3. 原生样式实践：
   • 阴影：弃用 legacy 阴影，统一使用 boxShadow。
   • 圆角：使用 { borderCurve: 'continuous' } 还原 iOS 连续曲率圆角。
   • 导航：使用 Stack.Screen 的 options 设置页面标题，而非在页面内部写 Text 标题。
4. 高级交互实现：
   • 使用 Link.Preview 和 Link.Menu 构建 iOS 风格的预览与上下文菜单。
   • 利用 expo-glass-effect 实现液态玻璃背板效果。

下载和安装

下载 building-native-ui 中文版 Skill ZIP

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

你可能还需要

暂无推荐