SuperAPI AI 工具集

react-native

编程与开发

查看项目

更新于 10-15 02:54

技能介绍

用途

该技能面向使用 React Native 进行移动应用开发的场景,提供一套可参考的工程规范与实践模式,帮助组织跨平台代码、管理状态、编写测试并处理平台差异。

主要能力

项目结构

推荐按职责划分目录:core 存放不依赖 React 的纯业务逻辑(types.ts 与 services),components 存放可复用 UI 组件并支持 barrel export,screens 存放屏幕组件并为每个屏幕配套专属 Hook,navigation 管理导航配置,hooks 存放共享自定义 Hook,store 管理状态,utils 存放工具函数,测试放在 tests 目录,另有 android、ios 原生目录与 CLAUDE.md。

组件模式

  • 仅使用函数式组件,保持简单可测试,例如带 label、onPress、disabled 的 Button。
  • 将逻辑抽取到 Hook(如 useHome 管理 items、loading 与 refresh),屏幕组件只负责展示。
  • 始终显式声明 Props 接口,即使结构简单(如 ItemCard)。

状态管理

  • 优先使用局部状态 useState,按需升级。
  • 需要全局状态时使用 Zustand(示例中通过 create 定义 AppState 与 setUser)。
  • 服务端状态使用 React Query,示例包含 useItems 的 useQuery 与 useCreateItem 的 useMutation,并在成功后通过 invalidateQueries 刷新缓存。

测试

  • 组件测试使用 React Native Testing Library 的 render 与 fireEvent,示例验证按下调用 onPress、禁用时不调用。
  • Hook 测试使用 renderHook 与 act,示例验证 useCounter 的计数递增。

平台特定代码

  • 谨慎使用 Platform.select,例如在 StyleSheet.create 中按 ios / android 分别设置阴影与 elevation。
  • 差异复杂时拆分为 Component.tsx(共享逻辑)、Component.ios.tsx、Component.android.tsx 与 index.ts。

使用方式

按照文档给出的目录结构组织项目,在编写组件时遵循函数式组件、逻辑抽 Hook、显式 Props 接口的约定;根据状态类型选择 useState、Zustand 或 React Query;为组件与 Hook 编写相应测试;处理平台差异时优先使用 Platform.select,复杂场景改用平台后缀文件。

适用场景

适合采用 React Native 开发 iOS 与 Android 跨平台应用的开发者或团队,尤其是需要统一项目结构、状态管理方案与测试规范的工程环境。

限制

资料未提供安装命令、依赖版本、具体平台配置要求、性能数据或收费信息。反模式部分仅给出需要避免的做法清单,未展开原因与替代方案的完整说明。