SuperAPI AI 工具集

react-native-best-practices

前端与建站

查看项目

更新于 10-15 23:44

技能介绍

用途:为 React Native 与 Expo 应用提供系统化的性能与实现规范,适用于构建应用、优化列表与滚动性能、使用 Reanimated 实现动画、处理图片与媒体、配置原生模块或字体,以及组织含原生依赖的 Monorepo 项目。

主要能力:按优先级组织规则。列表性能为 CRITICAL,含虚拟化(大列表用 FlashList)、列表项组件 memo 化、稳定回调引用、避免内联样式对象、将函数提取到渲染外、优化列表图片、把昂贵计算移出列表项、异构列表使用 item types。动画为 HIGH,含只动画 transform 与 opacity、用 useDerivedValue 处理计算动画、用 Gesture.Tap 替代 Pressable。导航为 HIGH,建议使用原生 stack 与原生 tabs 而非 JS 导航器。UI 模式为 HIGH,含用 expo-image 处理图片、用 Galeria 做图片灯箱、用 Pressable 替代 TouchableOpacity、在 ScrollView 中处理安全区、用 contentInset 处理头部、使用原生上下文菜单与原生模态、用 onLayout 而非 measure()、用 StyleSheet.create 或 Nativewind 编写样式。状态管理为 MEDIUM,含最小化状态订阅、回调使用 dispatcher 模式、首屏显示 fallback、为 React Compiler 解构函数、处理 Reanimated shared values。渲染为 MEDIUM,含文本包裹在 Text 组件中、避免用 falsy && 做条件渲染。Monorepo 为 MEDIUM,含原生依赖放在应用包内、各包使用单一版本。配置为 LOW,含用 config plugins 配置自定义字体、组织设计系统导入、提升 Intl 对象创建。

使用方式:按需阅读各规则文件,如 rules/list-performance-virtualize.md、rules/animation-gpu-properties.md;每个规则文件包含原因说明、错误代码示例与解释、正确代码示例与解释,以及补充上下文与参考。完整指南见 references/full-guide.md。

限制:资料未提供安装命令、收费方式、支持平台版本或效果数据,暂未提供。