React Native/Expo 移動應用開發規範

# React Native/Expo 移動應用開發規範 ## 程式碼風格與結構 - 編寫簡潔、類型安全的 TypeScript 程式碼 - 使用函數式組件和 Hook，而非類組件 - 確保組件模塊化、可重用且易於維護 - 按功能組織文件，將相關組件、Hook 和樣式分組 ## 命名規範 - 變數和函數名稱使用 camelCase（如 `isFetchingData`、`handleUserInput`） - 組件名稱使用 PascalCase（如 `UserProfile`、`ChatScreen`） - 目錄名稱使用小寫字母和連字號（如 `user-profile`、`chat-screen`） ## TypeScript 使用 - 所有組件使用 TypeScript，優先使用 interface 定義 props 和 state - 在 `tsconfig.json` 中啟用嚴格類型檢查 - 避免使用 `any` 類型，追求精確類型定義 - 使用 `React.FC` 定義帶有 props 的函數式組件 ## 性能優化 - 最小化 `useEffect`、`useState` 和在渲染方法中的重計算 - 對靜態 props 的組件使用 `React.memo()` 防止不必要的重新渲染 - 使用 FlatList 性能優化屬性：`removeClippedSubviews`、`maxToRenderPerBatch`、`windowSize` - 當項目大小一致時使用 `getItemLayout` 提升 FlatList 性能 - 避免在 `renderItem` 或事件處理程序中使用匿名函數 ## UI 與樣式 - 使用一致的樣式方案：`StyleSheet.create()` 或 Styled Components - 考慮不同屏幕尺寸和方向，確保響應式設計 - 使用專為 React Native 設計的圖片處理庫（如 `react-native-fast-image`） ## 最佳實踐 - 遵循 React Native 的線程模型確保流暢的 UI 性能 - 使用 Expo EAS Build 和 Updates 進行持續部署和 OTA 更新 - 使用 React Navigation 處理導航和深度鏈接