expo-native-ui skill 是什麼、怎麼安裝使用：讓智能體寫出有原生質感的 Expo 介面

本文根據 expo/skills 倉庫裏該技能的 SKILL.md 與倉庫 README 整理，資料核對於 2026-10-11。所在倉庫 expo/skills 在 GitHub 約 2686 Star（同日數據）。技能內容會隨倉庫更新，以倉庫為準。

這個 Skill 做什麼

讓大模型寫 React Native 介面，常見結果是「能跑，但一看就不是原生應用」：自己畫的開關、網頁味的陰影、已經被移除的舊組件。expo-native-ui 用一組明確的取捨來糾正。description：構建美觀、有原生感的 Expo 介面；涵蓋蘋果人機介面規範風格、語義化顏色、原生控件、SF Symbols、媒體、視覺效果、漸變、存儲和響應式佈局；路由與導航用 expo-router 技能，動效用 expo-animation 技能。

幾塊主要內容：

• 先查 expo-ui：選任何介面組件前，先看 @expo/ui 有沒有對應的原生組件（底部彈層、按鈕、選擇器、滑塊、選單、開關、分段控件等），它們在 iOS 上是真正的 SwiftUI、在安卓上是 Jetpack Compose。
• 運行方式：始終先試 Expo Go（npx expo start 掃碼），確實需要時才做自定義構建，並列出了哪些情況必須自定義構建、哪些情況 Expo Go 就夠。
• 庫的取捨：不用已從 React Native 移除的模組（如舊的 Picker、WebView、SafeAreaView、AsyncStorage）；音影片用 expo-audio、expo-video，不用 expo-av；iOS 圖標用 expo-symbols；圖片用 expo-image；安全區域用 react-native-safe-area-context；顏色用路由庫導出的語義化顏色，自動適配深淺色。
• 樣式規則：通用樣式、顏色、文字、陰影各有一節，另有響應式和交互行為的要求。

目錄裏有七份參考：控件、漸變、圖標、媒體、存儲、視覺效果，以及 WebGPU 與 Three.js。

怎麼安裝

expo-native-ui 隨 Expo 官方插件安裝。README 的建議是 Claude Code 和 Codex 用插件，這樣能跟着插件市場自動更新：

bash
claude plugin install expo@claude-plugins-official

Codex 用 codex plugin add expo@openai-curated。Cursor、OpenCode、Copilot 等用 skills CLI：npx skills@latest add expo/skills --skill '' 是全部安裝，把 '' 換成 expo-native-ui 就只裝這一個。

倉庫整體介紹和其他安裝方式，詳見本站《expo/skills 是什麼、怎麼安裝：Expo 官方 Agent Skills（React Native 應用開發、EAS 構建與發佈）》。

怎麼用

• 「做一個設定頁，分組列表加開關和選擇器，要像系統設定那樣」。
• 「把這個頁面裏手寫的底部彈窗換成原生的」。
• 「檢查這個項目用了哪些已經不推薦的庫，給出替換方案」。

適合誰 / 侷限

適合用 Expo 做 iOS 和安卓應用、希望介面貼近系統風格的開發者。侷限：規範以蘋果的設計語言為主，SKILL.md 自己也說明 SF Symbols 只在蘋果平台可用，安卓上要另行處理圖標；部分建議依賴較新的 Expo SDK 版本，老項目要先升級；做強品牌化、非系統風格的介面時，這些約束未必合適。

注意事項

• 許可：MIT（frontmatter 標註）。
• 不帶腳本：說明文字加參考文件；它會建議安裝若干 Expo 官方庫，按項目的 SDK 版本確認兼容性。
• 技能版本隨 Expo SDK 更新較快，以倉庫為準。