📌 building-native-ui 是什么？

用 Expo 做 React Native 界面，组件、样式、适配都有讲究。building-native-ui 是官方技能，让 AI 帮你构建原生界面。

Expo 让 React Native 开发变得简单——不用配 Xcode、不用管原生工程，一个命令就能在真机或模拟器上预览。这个技能帮你把界面这层做好。

🧩 核心功能

组件使用：用 Expo/RN 组件搭界面。

样式适配：处理不同屏幕尺寸和平台。

交互：手势、动画、导航。

性能：优化列表和渲染。

安全区：处理刘海屏、安全区。

主题：支持浅色深色主题。

👍 优点

跨平台：一套代码跑 iOS 和 Android。

上手快：Expo 生态友好。

组件丰富：官方和社区组件多。

⚠️ 不足与局限

复杂原生模块仍需写原生代码。

性能敏感场景要注意优化。

和纯原生比，有少量功能延迟。

🙋 适合谁用

移动端开发者：用 Expo 做界面。

前端转移动端：用熟悉的 React 做 App。

团队：跨平台开发。

独立开发者：快速做 App。

🛠️ 第一次安装

前提：电脑装了 Node.js（18+），有支持 Skill 的 AI 工具（如 Claude Code）。打开终端执行：

bash
npx skills add expo/skills --skill building-native-ui

CLI 会自动检测你装的 AI 助手，确认安装位置后即可使用。

✍️ 上手：几个真实例子

场景一：做列表

提示词
帮我用 Expo 做一个商品列表页，带下拉刷新和加载更多。

场景二：做表单

提示词
帮我做一个登录表单，带输入校验和错误提示。

场景三：适配安全区

提示词
帮我处理这个页面的刘海屏安全区适配。

🎯 典型应用场景

列表页：商品、信息列表。

表单：登录、填写表单。

详情页：内容详情展示。

导航：页面间跳转。

⚖️ 和类似方案对比

和直接写原生（Swift/Kotlin）相比，Expo 的价值是"一套 React 代码跑两端"，开发效率高很多；和纯 React Native 相比，Expo 又省去了原生工程的配置麻烦。对大多数 App 来说，Expo 是更快的选择。

💡 常见问题 FAQ

问：要会原生吗？
大部分场景不需要，复杂原生模块才需要。

问：性能怎么样？
常规界面够用，长列表用 FlatList 优化。

问：能热更新吗？
能，配合 EAS 支持 OTA 更新。

问：和 React Native 什么关系？
Expo 是基于 React Native 的框架，加了工具链和生态。

🤖 适合哪些 AI 工具

Expo 官方 Skill，Claude Code、Cursor、Codex 等支持 Skill 的工具都能装。