React Native 技能
React Native 和 Expo 應用程式的全面最佳實務。包含涵蓋效能、動畫、UI 模式以及平台特定最佳化的多個類別規則。
適用時機
在以下情況參考這些指南：
- 建構 React Native 或 Expo 應用程式
- 最佳化列表和滾動效能
- 使用 Reanimated 實作動畫
- 處理圖片和多媒體
- 設定原生模組或字型
- 使用原生相依性結構化 monorepo 專案
依優先級分類的規則
| 優先級 | 類別 | 影響程度 | 前綴 |
|---|---|---|---|
| 1 | 列表效能 | 嚴重 | list-performance- |
| 2 | 動畫 | 高 | animation- |
| 3 | 導航 | 高 | navigation- |
| 4 | UI 模式 | 高 | ui- |
| 5 | 狀態管理 | 中 | react-state- |
| 6 | 渲染 | 中 | rendering- |
| 7 | Monorepo | 中 | monorepo- |
| 8 | 設定 | 低 | fonts-, imports- |
快速參考
1. 列表效能 (嚴重)
list-performance-virtualize- 對大型列表使用 FlashListlist-performance-item-memo- 記憶列表項目元件list-performance-callbacks- 穩定回呼參考list-performance-inline-objects- 避免內聯樣式物件list-performance-function-references- 將函式提取到渲染外部list-performance-images- 最佳化列表中的圖片list-performance-item-expensive- 將昂貴運算移到項目外部list-performance-item-types- 對異質列表使用項目類型
2. 動畫 (高)
animation-gpu-properties- 僅對 transform 和 opacity 執行動畫animation-derived-value- 對計算後的動畫使用 useDerivedValueanimation-gesture-detector-press- 使用 Gesture.Tap 代替 Pressable
3. 導航 (高)
navigation-native-navigators- 使用原生堆疊和原生標籤頁，而非 JS 導航器
4. UI 模式 (高)
ui-expo-image- 所有圖片使用 expo-imageui-image-gallery- 使用 Galeria 實作圖片燈箱ui-pressable- 使用 Pressable 代替 TouchableOpacityui-safe-area-scroll- 在 ScrollView 中處理安全區域ui-scrollview-content-inset- 對標題使用 contentInsetui-menus- 使用原生上下文選單ui-native-modals- 盡可能使用原生模態ui-measure-views- 使用 onLayout，而非 measure()ui-styling- 使用 StyleSheet.create 或 Nativewind
5. 狀態管理 (中)
react-state-minimize- 最小化狀態訂閱react-state-dispatcher- 對回呼使用 dispatcher 模式react-state-fallback- 在首次渲染時顯示備用內容react-compiler-destructure-functions- 為 React Compiler 解構react-compiler-reanimated-shared-values- 使用編譯器處理 shared values
6. 渲染 (中)
rendering-text-in-text-component- 將文字包裹在 Text 元件中rendering-no-falsy-and- 避免使用 falsy && 進行條件渲染
7. Monorepo (中)
monorepo-native-deps-in-app- 將原生相依性保留在應用程式套件中monorepo-single-dependency-versions- 在套件間使用單一版本
8. 設定 (低)
fonts-config-plugin- 使用設定外掛程式處理自訂字型imports-design-system-folder- 組織設計系統匯入js-hoist-intl- 提升 Intl 物件的建立
如何使用
閱讀個別規則檔案以取得詳細說明和程式碼範例：
rules/list-performance-virtualize.md
rules/animation-gpu-properties.md
每個規則檔案包含：
- 為何重要的簡要說明
- 錯誤的程式碼範例與解釋
- 正確的程式碼範例與解釋
- 其他上下文和參考資料
完整彙編文件
如需包含所有展開規則的完整指南：AGENTS.md