SuperAPI AI 工具集

theone-react-native-standards

编程与开发

查看项目

更新于 10-16 04:01

技能介绍

用途

本技能用于强制执行 TheOne Studio 的 React Native 开发标准,核心理念是「代码质量优先」(CODE QUALITY FIRST)。它面向编写、重构或审查 React Native + TypeScript 代码的场景,帮助开发者按统一规范实现移动端功能。

主要能力

技能内容按四个优先级组织:

优先级 1:代码质量与卫生(最重要)

  • TypeScript 严格模式、ESLint + Prettier 强制检查
  • 路径别名(@/)、抛出错误(绝不静默吞掉错误)、结构化日志
  • 禁止 any 类型、正确使用错误边界、导入顺序一致
  • 文件命名约定、禁止在 JSX 中使用内联样式

优先级 2:现代 React 与 TypeScript

  • 使用带 Hooks 的函数组件(不使用类组件)
  • 通过自定义 Hook 复用逻辑、正确的记忆化
  • 类型安全的 Props、泛型、辨识联合
  • 用 useCallback/useMemo 优化性能

优先级 3:React Native 架构

  • 使用 Zustand/Jotai 管理状态(两者均有说明,同一项目内需保持一致)
  • Expo Router(基于文件)或 React Navigation 7
  • FlatList 优化(绝不使用 ScrollView + map)
  • 平台特定代码(.ios.tsx/.android.tsx)

优先级 4:移动端性能

  • 列表渲染优化(getItemLayout、keyExtractor)
  • 避免不必要的重渲染(React.memo、shouldComponentUpdate)
  • 懒加载、代码分割、包体积优化
  • 防止内存泄漏(清理 effect)

使用方式

技能会在以下情况触发:编写或重构 React Native TypeScript 代码、实现移动端 UI 组件或功能、处理状态管理(Zustand/Jotai)、实现导航流程(Expo Router/React Navigation)、优化列表渲染或应用性能、审查 React Native 拉取请求、搭建项目架构或约定。

资料提供了快速参考指南与代码示例(BAD vs GOOD 对比),例如:使用函数组件替代类组件、用 Zustand 管理应用级状态、用带优化的 FlatList 替代 ScrollView + map。同时给出常见错误清单与代码审查检查表(区分阻塞合并的关键问题、需修改的重要问题与建议项)。

适用场景

TheOne Studio 内部的 React Native 移动应用开发、代码审查与项目架构搭建。

限制与暂未提供的内容

  • 资料未提供该技能的安装命令与具体使用步骤。
  • 资料未说明收费、价格或平台支持信息。
  • 推荐技术栈版本(资料给出,供参考):React Native 0.74+、Expo SDK 51+、TypeScript 5.4+、React 18.2+、Zustand 4.5+ 或 Jotai 2.8+、Expo Router 3.5+ 或 React Navigation 7+;工具:ESLint 8.57+(含 @react-native-community 插件)、Prettier 3.2+、Metro bundler、React DevTools。