以 skill 自身的术语
这个 skill 讲解 React Native 样式模式、React Navigation 6+ 以及用于构建跨平台移动应用的 Reanimated 3。它涵盖用于样式的 StyleSheet 和 styled-components、适配不同屏幕尺寸的响应式布局、针对 iOS 和 Android 的平台特定设计、基于 Gesture Handler 的手势驱动交互，以及性能优化技巧。
该 skill 专注于打造原生品质的用户体验：在 UI 线程上运行的 60fps 动画、正确的导航类型定义，以及真机测试实践。
它产出什么
- 带有 TypeScript 接口、StyleSheet 定义和 Reanimated 动画的 React Native 组件
- 使用 Reanimated 3 的 useSharedValue 与 useAnimatedStyle 实现 60fps 性能的动画组件
工作方式
- 01使用 StyleSheet 设置样式
使用 StyleSheet.create 而非内联样式来定义组件样式，以获得更好的性能。
- 02使用类型化路由构建导航
使用 React Navigation 6+ 实现导航，并为所有导航器提供 TypeScript ParamList 类型定义，以确保各页面间的类型安全。
- 03在 UI 线程上执行动画
使用运行在 UI 线程上的 Reanimated 3 worklets 创建高性能动画，借助 useSharedValue 和 useAnimatedStyle 实现 60fps 性能。
- 04使用 GestureDetector 处理手势
使用 Gesture Handler 实现手势驱动的交互，用 GestureDetector 包裹手势，并使用 simultaneousHandlers 解决冲突。
- 05优化渲染
使用 React.memo 和 useCallback 避免不必要的重新渲染。对于列表，始终使用 FlatList 而不是配合 map 的 ScrollView。