用途 该技能用于指导在 React Native / Expo 应用中编写 React 组件、Hook 和 Effect,使代码遵循一套统一、可检查的 React 规则。它覆盖组件结构、Hook 文件组织、Effect 使用、状态管理读取、样式与文本、无障碍、列表、布局与安全区、错误边界以及测试等方面。
主要能力
- 组件规则:每个文件一个函数组件,命名导出,props 只读(数组使用 readonly T[]),回调命名 onX,本地处理器命名 handleX;唯一的 class 是错误边界。
- 屏幕结构:屏幕由薄路由文件、纯视图和唯一一个 model hook 组成;只有 model hook 读取 store、service、服务端状态、时钟和导航,规则和派生值放在旁边的纯函数中。
- Effect 规则:Effect 只用于同步 React 外部系统,共四类(订阅 OS 或原生事件并返回取消订阅、把 React state 推入原生 API、屏幕聚焦时执行工作、测量),并必须清理;禁止在 Effect 体内同步设置 state。
- React Compiler:不手写 useMemo、useCallback、memo;测量后的例外需带注释和 lint 豁免;'use no memo' 仅在有指明失败测试的注释时出现;Reanimated shared value 使用 .get() 和 .set()。
- 纯渲染:禁止在组件中使用 Date.now()、new Date()、Math.random()、performance.now()、读取 ref、在组件内声明组件、渲染期间设置 state;时间和随机性来自 model hook 中的端口。
- Store 读取:每次读取都传 selector,构造值经 useShallow 包装,避免在 Zustand 5 中因每次返回新对象导致无限循环。
- Hook 文件:每个 Hook 位于 use-<name>.ts 并导出 useName,最多三个参数,返回一个值或带命名字段的对象,不返回 JSX。
- 可按压组件:只放在 src/ui,必须带 testID,统一处理 role、翻译标签、状态和 44pt 触摸区域。
- 列表:增长型列表使用 FlatList 和稳定 key(keyExtractor 返回 id);仅在性能分析证明需要时用 FlashList;有界短列表可用 ScrollView 并注明边界;禁止用数组索引作 key。
- 布局与安全区:不使用 Dimensions,改用 useWindowDimensions()、useWindowClass() 或 onLayout;每个屏幕位于 ScreenFrame 中并通过必需的 edges 声明周围元素;插槽方向不转化为 start/end 键,不在 direction 模块外读取 isRTL。
- 文本:文本统一走应用的文本原语,react-native 的 Text 仅由 AppText 导入。
- 错误边界:路由失败进入 Expo Router 的 ErrorBoundary 导出;屏幕局部可失败部分放入 SubtreeErrorBoundary;fallback 不自动重试;异步处理器以 task().catch(reportError) 开始。
- 检查工具:零依赖脚本 check-react-rules.mjs 检查 lint 未完全覆盖的规则,配合 npm run typecheck、ESLint --max-warnings 0 和 Jest 测试。
使用方式 资料给出了一套工作流:每会话先阅读 references/rules-explained.md;首次在应用中使用时复制 templates/src/hooks/ 和 templates/src/ui/ 到对应目录;按照 patterns-and-recipes.md 中的模式编写屏幕、组件、Hook、Effect 和列表;先写 RNTL 测试;最后运行 typecheck、ESLint、Jest 和检查脚本,修复所有 FAIL 并重跑直到输出 RESULT: PASS。
适用场景 适用于使用 React Native / Expo 开发、启用 React Compiler 的移动应用项目,尤其是需要统一组件与 Hook 规范、保证跨平台布局与安全区正确、避免 Effect 泄漏和 Zustand 无限循环、强化无障碍与测试覆盖的团队。
限制 资料未提供该技能的具体安装命令(仅给出检查脚本运行方式)、收费模式、支持的 React Native 版本范围以及实际使用效果数据。部分规则依赖其他技能(如 state-management-zustand、design-system-structure、accessibility-as-code、unit-and-component-tests)的检查器与约定。