react-native-design

此技能為專業 React Native 開發提供全面的工具集，專注於 UI、導航與複雜互動模式的高效實現。針對軟體工程師、行動開發者與 UI/UX 設計師，本技能是構建具有原生流暢度與響應性的企業級跨平台應用程式之權威指南。無論是從零開始構建應用，還是優化現有程式碼庫，此技能皆提供確保組件可擴展性與高性能的關鍵技術。

本技能整合了 React Native 環境的高級知識，特別針對 Reanimated 3 等現代標準來實現高影格率動畫，並利用 React Navigation 6+ 構建健壯的路由架構。它通過提供動態樣式、Flexbox 佈局與事件處理的模組化程式碼模式，彌合了基本組件結構與複雜手勢驅動行動介面之間的差距。使用者可利用此內容實現平台特定的設計邏輯、優化記憶體使用，並構建在 iOS 與 Android 上皆具備原生體驗的流暢旅程。

• 使用 StyleSheet 與 styled-components 進行高級樣式設定，打造一致、可主題化且高效的設計系統。

• 利用 Flexbox 實現響應式佈局，包括複雜的行/列對齊與條件式 UI 渲染。

• 使用 React Navigation 6+ 進行健壯的導航配置，涵蓋堆疊 (Stack)、分頁 (Tab) 與側邊欄 (Drawer) 模式及型別安全的路由。

• 由 Reanimated 3 驅動的高效能動畫管線，包括共享值 (Shared Values)、佈局動畫與手勢驅動的互動。

• 針對 iOS 與 Android 的平台特定優化與跨平台設計模式，確保無縫執行。

• 高效使用 Gesture Handler 創建高度互動且觸控響應敏捷的行動組件。

• 外部 UI 函式庫的整合策略與 React Native 應用的效能監控。

• 在啟動新行動專案或重構導航架構時使用此技能，以確保型別安全與標準化的路由實踐。

• 在構建可重複使用的組件庫時，應用樣式模板以維持一致的間距、排版與視覺層級。

• 利用 Reanimated 範例實現流暢、不阻塞的 UI 過渡，將繁重計算從主 JS 執行緒中卸載。

• 始終使用 Flexbox 技術在多種裝置螢幕尺寸上測試佈局設計，確保無障礙性與視覺完整性。

• 對於複雜的手勢，將 Gesture Handler 與 Reanimated 共享值結合使用，以達成 60/120 FPS 的效能，確保互動在高負載下依然保持靈敏。