react-native-architecture

概覽

什麼是 react-native-architecture？

react-native-architecture 提供一套實用藍圖，用於構建可擴展且生產就緒的 React Native 行動應用。它著重於使用 Expo、高級導航、原生模組整合、離線優先模式，以及穩健的專案結構。此技能專為希望加速應用交付並遵循最佳實務的前端開發者與行動團隊設計。

誰適合使用此技能？

• 正在啟動新的 React Native 或 Expo 專案的開發者
• 實作複雜導航或身份驗證流程的團隊
• 需要整合原生模組或平台 API 的專案
• 需要離線支援與可靠狀態管理的應用
• 優化 React Native 效能或設置行動 CI/CD 的任何人

它解決了哪些問題

• 以經驗證的專案結構減少設定時間
• 明確 Expo 與 Bare React Native 的使用時機
• 指導原生模組與平台 API 的整合
• 支援離線優先與跨平台開發
• 幫助維護可擴展且易維護的程式碼庫

使用說明

安裝步驟

1. 使用以下指令將技能加入您的 agent：

   npx skills add https://github.com/wshobson/agents --skill react-native-architecture
   

2. 開啟 SKILL.md 檔案，了解高階概覽與工作流程指引。
3. 閱讀 README.md、AGENTS.md 與 metadata.json 等輔助檔案，獲取更深入的背景資訊。
4. 探索 rules/、resources/、references/ 與 scripts/ 目錄，了解實作細節與輔助工具。

專案結構概覽

建議結構包含：

• src/app/：Expo Router 螢幕，依導航類型組織（例如 auth、tabs）
• src/components/：UI 與功能專用元件
• src/hooks/：自訂 React hooks
• src/services/：API 與原生服務整合
• src/stores/：狀態管理邏輯
• src/utils/：工具函式
• src/types/：TypeScript 型別定義

Expo 與 Bare React Native 比較

• Expo：設定簡單，原生模組由管理，快速 OTA 更新
• Bare React Native：控制度高，需手動連結原生模組，複雜度較高
  除非需要 Expo 不支援的自訂原生程式碼，否則大多數專案建議使用 Expo。

如何調整此技能

建議不要直接複製檔案，而是根據您自己的程式庫、工具鏈與團隊慣例，調整架構與設計模式。

常見問題

react-native-architecture 的主要優勢是什麼？

它提供清晰且可擴展的 React Native 專案起點，減少設定時間與技術負債。

可以用於現有的 React Native 專案嗎？

可以，您能逐步採用建議的結構與模式，提升維護性。

這個技能只適用於 Expo 嗎？

不是。雖然大多數情況推薦使用 Expo，但當需要自訂原生整合時，也支援 Bare React Native。

安裝後該從哪裡開始？

建議先閱讀 SKILL.md 取得概覽，接著瀏覽檔案結構以獲得詳細指引與範例。

如何查看所有可用的檔案與腳本？

請使用 Files 標籤瀏覽完整檔案樹，包括巢狀參考與輔助腳本。