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 的性能，确保交互在高负载下依然保持灵敏。