react-native-dev
打造 React Native 與 Expo 應用程式
使用 React Native 開發行動應用程式需要在元件、狀態管理、動畫和部署等複雜的選擇中做出決策。此技能提供結構化的開發指南，包含經驗證的設計模式、推薦的函式庫以及可投入生產環境的 Expo 與 React Native 專案範例。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「react-native-dev」。 使用 Expo Router 建立包含 Home、Search 與 Profile 分頁的 tab 導航佈局。
預期結果:
- 一個 tab 佈局檔案（app/(tabs)/_layout.tsx），使用來自 expo-router 的 Tabs 元件
- 三個分頁畫面定義，搭配 Ionicons 圖示
- 包含大標題支援與自訂樣式表頭的 Header 設定
- 個別路由檔案：app/(tabs)/home.tsx、app/(tabs)/search.tsx、app/(tabs)/profile.tsx
正在使用「react-native-dev」。 展示如何在 Zustand 中使用 persist middleware 管理使用者偏好設定。
預期結果:
- 一個包含 create 與 persist middleware 的 Zustand store 定義
- 包含主題、語言與通知設定型別安全的 state 介面
- 在元件中使用 selector 模式以避免不必要的重新渲染
- 使用 MMKV 或 AsyncStorage 設定儲存後端
安全審計
安全This skill is a documentation-only reference guide for React Native and Expo development. It contains 12 markdown files (SKILL.md plus 11 reference files) with code examples. All 740 static analysis findings are false positives: the scanner misidentified markdown code blocks (triple-backtick fenced examples) as executable code. Patterns flagged include shell commands in installation instructions, relative imports shown as code examples, environment variable usage in documentation, and documentation references to .env files. No executable code exists in this skill.
風險因素
品質評分
你能建構什麼
從零開始建立新 Expo 專案
開發者需要搭建一個具備完整專案結構、路由、狀態管理與 CI/CD 流程且可投入生產的 React Native 應用程式。
實現複雜動畫與手勢操作
開發者需要使用 Reanimated 3 與 Gesture Handler 加入流暢動畫、手勢處理與滾動驅動效果。
優化應用程式效能並準備上架
團隊需要對應用程式進行效能分析、修復滾動卡頓、減少 bundle 大小、設定 EAS 建置，以及建立 CI/CD 流程以上傳至 App Store 與 Play Store。
試試這些提示
建立一個使用 TypeScript 的新 Expo 專案。包含 Expo Router 導航（tab 佈局）、FlashList 列表、expo-image 圖片處理，以及 Zustand 狀態管理。展示推薦的專案結構。
使用 React Hook Form 與 Zod 驗證建立登入表單。包含帶有錯誤訊息的電子郵件與密碼欄位、帶有載入狀態的提交按鈕，以及整合 fetch 封裝的 API 呼叫。
使用 Reanimated 3 在列表頁面與詳細頁面之間實現共用元素轉場動畫。列表使用 FlashList 並搭配記憶化項目。點擊項目時，以淡入淡出與縮放動畫過渡到詳細頁面。
使用 GitHub Actions 設定 EAS Build 與 Submit 流程。包含開發與生產環境的獨立建置設定檔、main 分支合併時自動提交至 App Store，以及不同階段的環境變數管理。
最佳實務
- 列表一律使用 FlashList 而非 FlatList，圖片使用 expo-image 而非 RN Image，以獲得更好的效能與快取機制
- 使用 Reanimated 時僅對 transform 與 opacity 屬性進行動畫，以保持動畫在 GPU 上合成並避免版面重新計算
- 客戶端環境變數使用 EXPO_PUBLIC_ 前綴，伺服器專用機密則在 API 路由中不使用該前綴
避免
- 在生產環境的列表與圖片畫廊中使用 FlatList 而未搭配記憶化項目，或使用未快取的 RN Image
- 從 barrel 檔案（index.ts）匯入導致 bundle 體積增加——一律直接從原始模組匯入
- 使用 Platform.OS 進行平台判斷而非 process.env.EXPO_OS，以及使用 useContext 而非 React 18 的 React.use