用途:面向使用 React Native 构建跨平台移动应用的开发场景,覆盖样式、导航与动画三方面,目标是做出性能良好、接近原生体验的界面。
主要能力:使用 StyleSheet 与 styled-components 编写组件样式;实现针对不同屏幕尺寸的响应式布局;处理 iOS 与 Android 的平台差异设计;使用 React Navigation 6+ 实现导航;使用 Reanimated 3 创建高性能动画;结合 Gesture Handler 实现手势驱动交互;并进行 React Native 性能优化。
适用时机:构建 React Native 应用、接入 React Navigation 6+、用 Reanimated 3 做动画、编写样式组件、实现响应式布局、处理平台专属设计、创建手势交互或做性能优化时。
用法与要点:技能文档给出一个使用 View、Text、Image、Pressable 与 Reanimated 的 useSharedValue、useAnimatedStyle、withSpring 的卡片组件示例,通过 Animated.createAnimatedComponent(Pressable) 在按下时改变缩放。最佳实践包括使用 TypeScript 定义导航与 props 类型、用 React.memo 与 useCallback 避免多余重渲染、用 Reanimated worklet 把动画放到 UI 线程、用 StyleSheet.create 代替内联样式、处理安全区域、在真机测试、长列表使用 FlatList、用 Platform.select 处理平台差异。
常见问题:手势冲突、导航类型错误、动画卡顿、内存泄漏、自定义字体加载与刘海屏安全区域问题。
限制:资料为技能说明,未提供安装命令、收费方式、版本支持范围或具体性能数据;核心概念章节已移至 references/details.md,正文不再包含其完整内容。