React Native 性能架构模式

要解决的移动端性能痛点

React Native（RN）应用开发中，列表滑动卡顿、动画掉帧是高频问题——不少开发者会用 ScrollView 渲染全量数据，或依赖 Animated 实现复杂动画，导致 JS 线程阻塞、UI 响应滞后。

技能的核心能力与工作流程

作为 RN + Expo 性能与架构顾问，该技能会按「CRITICAL 优先于 MEDIUM」的影响力顺序输出规则，核心工作流分四步：

• 列表性能（CRITICAL）：强制用 FlatList/FlashList 这类虚拟列表替代全量渲染，要求设置稳定的 keyExtractor，将 renderItem 用 React.memo 封装为独立组件，内联函数抽取到 useCallback，定高项提供 getItemLayout，大列表用 @shopify/flash-list，列表内大图用 expo-image 并指定尺寸。
• 动画优化（HIGH）：复杂动画改用 react-native-reanimated（UI 线程）而非 Animated（JS 线程），布局动画用 LayoutAnimation，共享元素转场用 reanimated 的共享转场方案，手势+动画组合用 react-native-gesture-handler+reanimated worklets。
• 导航与状态：导航选 expo-router 或 React Navigation，按 Platform.OS/useColorScheme 适配平台，状态管理按规模选 Context/Zustand/Redux。
• 评审输出：对照清单逐条检查，输出含严重度的问题与修复方案，以及 FlatList 配置清单。

适用边界与注意点

适用于新建 RN/Expo 应用、优化列表与滚动、开发动画、评审移动端性能、搭建新 Expo 项目；不适用非 RN 平台（如原生 iOS/Android 代码超出服务范围）。