RN 组件开发

跨平台 RN 开发的核心痛点

React Native 在跨平台开发中常面临性能瓶颈：长列表滚动卡顿、复杂导航结构导致内存膨胀、RN 未内置硬件能力需手写桥接、以及复杂手势冲突。这些痛点往往让 RN 应用的流畅度远不及原生。

技能如何工作

本技能将 RN 资深开发经验转化为可执行的工程规范：

• 组件与列表优化：按功能而非屏幕拆分组件，state 尽量上提。强制使用 FlatList 替代 ScrollView，通过 windowSize={5}、removeClippedSubviews 和 getItemLayout 优化渲染；renderItem 内的回调必须用 useCallback 包裹。
• 导航与原生桥接：基于 React Navigation 设计 Tab/Stack 嵌套与深层链接；当 RN 内置 API 不足时，优先使用新架构的 Turbo Module 编写原生模块，并严格处理线程调度（UI 更新需切回主线程）。
• 手势与动画：结合 react-native-gesture-handler 与 reanimated，将拖拽、缩放等手势动画放在 UI 线程执行，避免阻塞 JS 线程。

适用边界与注意点

此技能不适用于纯 UI 像素级精调（需用原生组件），也不适用于对包体积极度敏感或 3D 游戏渲染的场景。在桥接原生模块时，应优先评估社区维护的 Expo 模块而非盲目自研。