react-native-design

React Native Design 技能為行動工程師提供了一套完整的工具組，用於構建響應式、跨平台的用戶介面。此技能的核心在於現代 React Native 開發實踐，強調透過高效的樣式設計、穩健的導航架構與流暢的動畫，來實現原生級別的用戶體驗。它專為需要將設計規範轉化為功能性代碼的開發者設計，確保行動應用程式在 iOS 與 Android 平台上皆能保持高性能與可維護性。

• 掌握使用 StyleSheet、Flexbox 與動態組件樣式的核心佈局策略，以支援各種螢幕尺寸與方向需求。

• 透過 React Navigation 6+ 實作複雜的導航架構，包括 Stack、Tab 與 Drawer 導航器，以及嵌套導航模式與深度連結 (Deep Linking)。

• 利用 Reanimated 3 創建高性能、手勢驅動的互動，這些互動在 UI 線程執行，確保即使在繁重處理下仍能保持 60FPS 的流暢度。

• 整合 Gesture Handler 處理進階觸控互動，如平移、滑動與縮放，達到原生級的手感與響應能力。

• 在必要時使用平台專有的樣式技術，根據 iOS HIG 與 Material Design 指南自定義 UI 元素。

• 應用性能優化技術以最小化 Bridge 通訊與佈局抖動，確保 React Native 生命週期內的代碼架構簡潔。

• 當您在架構新的行動應用程式螢幕，或重構現有 UI 組件以提升性能時，請使用此技能。

• 非常適合用於生成導航器的樣板代碼、設定複雜的動畫狀態值，或解決巢狀組件結構中的 Flexbox 佈局問題。

• 請確保所有樣式皆使用 StyleSheet.create 模式，以在 TypeScript 環境中獲得更好的性能與類型安全性。

• 在實作動畫時，優先使用 useSharedValue 與 useAnimatedStyle，將繁重的計算維持在 JavaScript 線程之外。

• 參考所提供的動態樣式模式，以維護簡潔且可重複使用的組件介面。