TypeScript & React Native 開發規範

# TypeScript & React Native 開發規範 ## 程式碼風格與結構 - 編寫簡潔、技術性的 TypeScript 程式碼，提供準確的範例 - 使用函數式和宣告式程式設計模式；避免使用類別 - 優先使用迭代和模組化，避免程式碼重複 - 使用帶有輔助動詞的描述性變數名稱（例如：isLoading、hasError） - 檔案結構：匯出的元件、子元件、輔助函數、靜態內容、型別 - 遵循 Expo 官方文件進行專案設定和配置：https://docs.expo.dev/ ## 命名慣例 - 目錄使用小寫字母和連字號（例如：components/auth-wizard） - 優先使用命名匯出（named exports）元件 ## TypeScript 使用 - 所有程式碼使用 TypeScript；優先使用 interface 而非 type - 避免使用 enum；改用 map 物件 - 使用帶有 TypeScript interface 的函數式元件 - 啟用 TypeScript 嚴格模式以獲得更好的型別安全 ## 語法與格式化 - 純函數使用 function 關鍵字 - 避免在條件式中使用不必要的大括號；簡單語句使用簡潔語法 - 使用宣告式 JSX - 使用 Prettier 保持程式碼格式化一致性 ## UI 與樣式 - 使用 Expo 內建元件處理常見 UI 模式和佈局 - 使用 Flexbox 和 Expo 的 useWindowDimensions 實現響應式設計 - 使用 styled-components 或 Tailwind CSS 進行元件樣式設計 - 使用 Expo 的 useColorScheme 實現深色模式支援 - 使用 ARIA 角色和原生無障礙屬性確保高無障礙性標準 - 使用 react-native-reanimated 和 react-native-gesture-handler 實現高效能動畫和手勢 ## 安全區域管理 - 使用 react-native-safe-area-context 的 SafeAreaProvider 全域管理安全區域 - 使用 SafeAreaView 包裹頂層元件以處理 iOS 和 Android 的凹口、狀態欄和其他螢幕插入 - 可滾動內容使用 SafeAreaScrollView 確保尊重安全區域邊界 - 避免為安全區域硬編碼 padding 或 margin；依賴 SafeAreaView 和 context hooks ## 效能優化 - 最小化 useState 和 useEffect 的使用；優先使用 context 和 reducer 進行狀態管理 - 使用 Expo 的 AppLoading 和 SplashScreen 優化應用啟動體驗 - 圖片優化：支援時使用 WebP 格式，包含尺寸數據，使用 expo-image 實現懶加載 - 使用 React 的 Suspense 和 dynamic imports 對非關鍵元件實現代碼分割和懶加載 - 使用 React Native 內建工具和 Expo 調試功能分析和監控效能 - 透過 memoizing 元件和適當使用 useMemo、useCallback hooks 避免不必要的重新渲染 ## 導航 - 使用 react-navigation 進行路由和導航；遵循堆疊、標籤和抽屜導航器的最佳實踐 - 利用深度連結和通用連結改善用戶參與度和導航流程 - 使用 expo-router 的動態路由實現更好的導航處理 ## 狀態管理 - 使用 React Context 和 useReducer 管理全域狀態 - 使用 react-query 進行數據獲取和快取；避免過多的 API 呼叫 - 複雜狀態管理考慮使用 Zustand 或 Redux Toolkit - 使用 expo-linking 等庫處理 URL 搜尋參數 ## 錯誤處理與驗證 - 使用 Zod 進行運行時驗證和錯誤處理 - 使用 Sentry 或類似服務實現適當的錯誤日誌記錄 - 優先處理錯誤處理和邊界情況： - 在函數開頭處理錯誤 - 對錯誤條件使用提前返回，避免深度嵌套的 if 語句 - 避免不必要的 else 語句；改用 if-return 模式 - 實作全域錯誤邊界以捕獲和處理意外錯誤 - 使用 expo-error-reporter 記錄和報告生產環境錯誤 ## 測試 - 使用 Jest 和 React Native Testing Library 編寫單元測試 - 使用 Detox 為關鍵用戶流程實作整合測試 - 使用 Expo 測試工具在不同環境中運行測試 - 考慮對元件進行快照測試以確保 UI 一致性 ## 安全性 - 清理用戶輸入以防止 XSS 攻擊 - 使用 react-native-encrypted-storage 安全儲存敏感數據 - 使用 HTTPS 和適當的身份驗證確保與 API 的安全通訊 - 遵循 Expo 安全指南保護應用：https://docs.expo.dev/guides/security/ ## 國際化 (i18n) - 使用 react-native-i18n 或 expo-localization 進行國際化和本地化 - 支援多語言和 RTL 佈局 - 確保文字縮放和字體調整以實現無障礙性 ## 關鍵慣例 1. 依賴 Expo 託管工作流程簡化開發和部署 2. 優先考慮行動網路核心指標（加載時間、卡頓和響應性） 3. 使用 expo-constants 管理環境變數和配置 4. 使用 expo-permissions 優雅處理設備權限 5. 實作 expo-updates 進行空中更新（OTA） 6. 遵循 Expo 應用部署和發布最佳實踐：https://docs.expo.dev/distribution/introduction/ 7. 透過在 iOS 和 Android 平台上廣泛測試確保相容性 ## API 文件 - 使用 Expo 官方文件進行專案設定和配置：https://docs.expo.dev/ 參考 Expo 文件獲取有關視圖、藍圖和擴展的最佳實踐詳細資訊。