SuperAPI AI 工具集

react-native

编程与开发

查看项目

更新于 10-16 05:52

技能介绍

用途:该技能面向 React Native 移动应用开发,给出一套可参考的工程约定与代码组织方式,覆盖项目结构、组件写法、状态管理、测试与平台差异处理。

主要能力:

  1. 项目结构:推荐将纯业务逻辑放在 src/core(不含 React),通用组件放 components,页面放 screens,并分别组织 navigation、hooks、store、utils 以及 tests、android、ios 等目录。
  2. 组件模式:仅使用函数组件;将逻辑抽取到自定义 Hook(如 useHome),页面只负责展示;Props 接口始终显式定义,并提供简单示例接口与组件写法。
  3. 状态管理:本地状态优先用 useState;全局状态在需要时使用 Zustand(create 创建 store);服务端状态使用 React Query(useQuery、useMutation,成功后 invalidateQueries)。
  4. 测试:组件测试使用 @testing-library/react-native 的 render、fireEvent;Hook 测试使用 @testing-library/react-hooks 的 renderHook、act,并给出示例用例。
  5. 平台差异:谨慎使用 Platform.select 处理样式差异;复杂差异拆分为 Component.tsx、Component.ios.tsx、Component.android.tsx 等独立文件。
  6. 反模式:避免内联样式、渲染中写逻辑、过深组件嵌套、Props 匿名函数、列表用索引作 key、直接修改 state、业务逻辑与 UI 混在一起、忽略 TypeScript 报错、组件过大。

使用方式:作为开发时的编码规范参考,按上述目录与模式组织代码,并遵循示例中的组件、Hook、状态与测试写法。资料中未提供安装命令、配置步骤或特定平台版本要求。

适用场景:需要跨平台(iOS/Android)React Native 应用开发,并关注代码分层、可测试性与类型安全的团队或个人。

限制:资料仅为模式与约定说明,未提供完整依赖清单、构建脚本、性能数据或线上实践效果;具体是否采用需结合项目实际情况。