@dtt_siye/atool 1.3.0 → 1.3.1

package/skills/project-analyze/rules/mobile-react-native.md

@@ -1,283 +1,86 @@
 # React Native 项目分析规则
 
-## 分析粒度
+> **编码规范**：本规则不包含编码规范内容。Phase 2.5 精炼阶段会自动加载 `react-native-conventions` skill 作为规范约束。
 
-按 Screen、Component、Navigation、Service 分层分析。
+## 模块发现策略
 
-```
-App.tsx / App.js（入口）
-    ↓
-Navigation（导航）
-    ↓
-Screens（页面）
-    ↓
-Components（组件）
-    ↓
-Hooks / Context（逻辑复用）
-    ↓
-Services / API（数据层）
-    ↓
-Stores / State（状态管理）
-    ↓
-Utils / Types（工具/类型）
-```
-
-## 目录扫描策略
-
-### 1. 识别项目类型
-
-**信号文件检测：**
-- `app.json` / `app.config.js` → Expo 项目
-- `android/app/build.gradle` + `ios/Podfile` → Bare React Native
-- `metro.config.js` → Metro bundler 配置
-
-### 2. 识别导航方案
-
-- React Navigation: `@react-navigation/native` 依赖
-- Expo Router: `expo-router` 依赖 + `app/` 目录
-- Native Stack / Tab / Drawer Navigator
-- Deep Linking 配置
-
-### 3. 识别状态管理
-
-- Redux Toolkit: `@reduxjs/toolkit`, `react-redux`
-- Zustand: `zustand`
-- MobX: `mobx`, `mobx-react`
-- Context API: React 内置
-- Recoil: `recoil`
-
-### 4. 依赖提取
-
-从 `package.json` 提取：
-
-| 类别 | 常见依赖 |
-|------|----------|
-| 导航 | @react-navigation/native, expo-router |
-| 状态管理 | @reduxjs/toolkit, zustand, mobx |
-| 网络 | axios, fetch, @tanstack/react-query |
-| 存储 | @react-native-async-storage/async-storage, MMKV |
-| UI | react-native-paper, native-base, tamagui |
-| 动画 | react-native-reanimated, react-native-gesture-handler |
-| 图片 | react-native-fast-image, expo-image |
-| 原生模块 | 各种 react-native-* bridge 模块 |
-
-### 5. 按层扫描路径
-
-- **Screens**: `src/screens/`, `app/` (Expo Router)
-- **Components**: `src/components/`
-- **Navigation**: `src/navigation/`
-- **Hooks**: `src/hooks/`
-- **Services**: `src/services/`, `src/api/`
-- **Store**: `src/store/`, `src/stores/`
-- **Types**: `src/types/`
-- **Utils**: `src/utils/`, `src/constants/`
-- **Assets**: `src/assets/`, `assets/`
-
-## 各层提取规则
-
-### 层 1: Navigation 层
-
-**扫描文件**: `src/navigation/**/*.tsx`, `app/**/*.tsx` (Expo Router)
-
-**提取内容**:
-- 导航类型（Stack / Tab / Drawer / Bottom Tabs）
-- 路由配置（name + component + options）
-- 屏幕参数类型定义
-- 导航守卫（认证检查）
-
-**输出示例**:
-```
-### 导航结构（React Navigation）
-- **文件**: `src/navigation/AppNavigator.tsx`
-- **类型**: Native Stack
-- **路由配置**:
-  | 路由名 | 组件 | 参数类型 | 选项 |
-  |--------|------|----------|------|
-  | Login | LoginScreen | - | headerShown: false |
-  | Main | BottomTabs | - | gestureEnabled: false |
-  | Home | HomeScreen | - | tabBarIcon: home |
-  | Profile | ProfileScreen | - | tabBarIcon: person |
-  | UserDetail | UserDetailScreen | { userId: string } | title: '用户详情' |
-  | Settings | SettingsScreen | - | - |
-- **认证守卫**: AuthProvider 包裹，未登录→Login，已登录→Main
-```
-
-### 层 2: Screen 层
-
-**扫描文件**: `src/screens/**/*.tsx`
-
-**提取内容**:
-- Screen 组件名 + 路径
-- Props（Navigation Props + 自定义 Props）
-- 使用的 Hooks（useState, useEffect, 自定义 Hook）
-- 使用的 API / Store
-- UI 结构（主要子组件，1-2 层）
-
-**输出示例**:
-```
-### HomeScreen
-- **路径**: `src/screens/Home/HomeScreen.tsx`
-- **Props**: StackScreenProps<HomeParamList, 'Home'>
-- **使用的 Hooks**:
-  | Hook | 用途 |
-  |------|------|
-  | useFeedStore | 获取 feed 列表 |
-  | useRefresh | 下拉刷新 |
-  | useAuth | 获取当前用户 |
-- **使用的 API**: getFeedItems(), getRecommendations()
-- **UI 结构**:
-  FlatList
-    ├── ListHeaderComponent: SearchBar + Banner
-    ├── renderItem: FeedCard
-    └── onRefresh: handleRefresh
-```
+从 `package.json` 和目录结构识别模块边界：
 
-### 层 3: Component 层
+- `package.json` → 解析 `dependencies` / `devDependencies`，识别导航、状态管理、原生模块
+- `src/screens/` / `src/views/` → 每个子目录或文件视为独立页面模块
+- `src/components/{name}/` → 3+ 文件的子目录视为独立组件模块
+- `src/store/` / `src/stores/` → 状态管理模块
+- `src/services/` / `src/api/` → 数据层模块
+- `src/hooks/` → 每个文件视为独立 Hook 模块
+- `app/` (Expo Router) → 基于文件系统的路由，每个文件视为一个页面
 
-**扫描文件**: `src/components/**/*.tsx`
+**不视为独立模块**：`App.tsx` / `index.js`（入口文件）、纯 re-export 的 `index.ts`、`src/utils/` / `src/helpers/` 合并为一个模块、`*.generated.ts` 跳过。
 
-**提取内容**:
-- 组件名 + 路径
-- Props TypeScript interface
-- 样式方案（StyleSheet.create / Styled Components / NativeWind）
-- 子组件结构
+## 入口识别
 
-**输出示例**:
-```
-### FeedCard
-- **路径**: `src/components/Feed/FeedCard.tsx`
-- **Props**:
-  ```typescript
-  interface FeedCardProps {
-    item: FeedItem;
-    onPress?: (item: FeedItem) => void;
-    showActions?: boolean;
-  }
-  ```
-- **子组件**: Avatar, Text, Image, ActionButtons
-- **样式**: StyleSheet.create（内联样式）
-```
+| 类型 | 识别特征 |
+|------|---------|
+| Bare React Native | `android/app/build.gradle` + `ios/Podfile` + `metro.config.js` |
+| Expo Managed | `app.json` / `app.config.js` + `expo` SDK |
+| Expo with Router | `expo-router` 依赖 + `app/` 目录（文件系统路由） |
 
-### 层 4: Store / 状态管理层
+App 入口：`App.tsx` / `App.js` → Navigation Provider → Root Navigator。
 
-**扫描文件**: `src/store/**/*.ts`, `src/stores/**/*.ts`
+## 架构模式识别
 
-**提取内容**:
-- Store 名称 + 类型
-- State 接口
-- Actions / Reducers
-- 异步 Thunk
+从 `package.json` 检测导航和状态管理方案：
 
-**输出示例**:
-```
-### feedSlice（Redux Toolkit）
-- **路径**: `src/store/slices/feedSlice.ts`
-- **State**:
-  | 字段 | 类型 | 说明 |
-  |------|------|------|
-  | items | FeedItem[] | Feed 列表 |
-  | loading | boolean | 加载状态 |
-  | error | string \| null | 错误信息 |
-  | hasMore | boolean | 是否有更多 |
-- **Reducers**: appendItems, clearFeed
-- **Async Thunks**: fetchFeedItems, loadMore
-```
+| 导航方案 | 识别依赖 |
+|---------|---------|
+| React Navigation | `@react-navigation/native` + Stack/Tab/Drawer |
+| Expo Router | `expo-router`（文件系统路由，`app/` 目录） |
+| React Native Navigation | `react-native-navigation` (Wix) |
 
-### 层 5: Service / API 层
+| 状态管理 | 识别依赖 |
+|---------|---------|
+| Redux Toolkit | `@reduxjs/toolkit` + `react-redux` |
+| Zustand | `zustand` |
+| MobX | `mobx` + `mobx-react` / `mobx-react-lite` |
+| Recoil | `recoil` |
+| Context API | 无第三方库，仅 React 内置 |
 
-**扫描文件**: `src/services/**/*.ts`, `src/api/**/*.ts`
+## 数据流模式
 
-**提取内容**:
-- API 客户端配置（baseURL, 拦截器）
-- API 函数列表
-- Token 管理
+- **Redux Toolkit**：`dispatch(action)` → `reducer` → `store.state` → `useSelector()` 重渲染
+- **Zustand**：`useStore(selector)` → `setState()` → 订阅者重渲染（更轻量）
+- **React Query**：`useQuery()` / `useMutation()` → 服务端状态缓存 + 自动同步
+- **原生模块桥接**：JS → `NativeModules.XXX.method()` → 原生代码执行 → Promise/Callback 返回
 
-### 层 6: Native Module 层（如适用）
+## 分析关注点
 
-**扫描文件**: `src/native/**/*.ts`, `android/app/src/main/java/**/*Module.kt`, `ios/**/*Bridge.m`
+- **原生模块边界（Native Module Boundary）**：检测 `NativeModules`、`NativeEventEmitter`、`requireNativeComponent`，列出所有 JS ↔ Native 桥接点
+- **导航结构**：React Navigation 需提取完整的 Navigator 嵌套树（Stack/Tab/Drawer 嵌套关系）；Expo Router 分析 `app/` 目录文件结构
+- **Bridge 检测**：`android/app/src/main/java/**/*Module.kt` + `ios/**/*Bridge.m` / `*Module.mm`，识别 @ReactMethod 方法
+- **Expo vs Bare 区别**：Expo Managed 不允许自定义原生代码；Bare 可以，需分析原生模块
+- **Metro 配置**：`metro.config.js` 中的 `resolver.extraNodeModules` 可能影响模块别名解析
+- **平台特定文件**：`*.ios.tsx` / `*.android.tsx` 需识别平台差异实现
 
-**提取内容**:
-- Native Module 名称
-- 导出方法（@ReactMethod）
-- 参数类型和返回类型
-- 线程配置
+## 输出示例
 
-**输出示例**:
-```
-### BiometricModule
-- **方法**:
-  | 方法 | 参数 | 返回 | 说明 |
-  |------|------|------|------|
-  | authenticate | (reason: string) | Promise<boolean> | 生物识别认证 |
-  | isAvailable | () | Promise<boolean> | 检查设备支持 |
-- **平台**: iOS (TouchID/FaceID), Android (BiometricPrompt)
 ```
-
-### 层 7: 样式层
-
-**扫描文件**: `src/theme/**/*.ts`, `src/styles/**/*.ts`
-
-**提取内容**:
-- 主题配置（颜色、字体、间距）
-- 样式方案（StyleSheet / Styled Components / NativeWind）
-- 暗色模式支持
-
-## 输出模板
-
-### README.md 章节结构
-
-```markdown
-# {App 名称}
-
-## 项目概述
-App 功能描述
-
-## 技术栈
-| 技术 | 版本 | 用途 |
-|------|------|------|
-
-## 架构设计
-### 架构图（ASCII）
-### 数据流图
-
-## 导航结构
-路由树 + 参数 + 导航方式
-
-## 状态管理
-Store 关系图
-
-## 模块详解
-按 Screen 分组
-
-## 原生模块
-Bridge 方法列表
-
-## 依赖管理
-关键 npm 依赖
+### 项目类型
+- 类型: Expo Managed (SDK 50)
+- 导航: Expo Router (文件系统路由)
+  app/
+    (auth)/login.tsx
+    (auth)/register.tsx
+    (tabs)/index.tsx    → 首页
+    (tabs)/profile.tsx  → 个人中心
+    user/[id].tsx       → 动态路由
+
+### 技术栈检测
+- 状态管理: Zustand (zustand 4.4.6)
+- 网络: Axios + React Query (@tanstack/react-query 5.0)
+- 原生模块: expo-camera, expo-notifications, react-native-mmkv
+
+### 原生模块边界
+| 模块 | 平台 | JS 调用方式 | 说明 |
+|------|------|------------|------|
+| BiometricModule | iOS + Android | NativeModules.Biometric.authenticate() | 生物识别 |
+| PushNotification | iOS + Android | expo-notifications API | 推送通知 |
 ```
-
-## 模块边界识别
-
-以下目录模式下的每个子目录视为独立模块（L2+ 分析时生成 MODULE-DOC.md）：
-
-| 层 | 扫描路径 | 模块判定规则 | MODULE-DOC slug 来源 |
-|----|----------|-------------|---------------------|
-| 页面/视图层 | `src/screens/`, `src/views/` | 每个子目录或文件 | 名称 kebab-case |
-| API/服务层 | `src/services/`, `src/api/` | 每个子目录 | 目录名 kebab-case |
-| 状态管理层 | `src/store/`, `src/stores/` | 每个子目录 | 目录名 kebab-case |
-| 组件层 | `src/components/{name}/` | 3+ 文件的子目录 | 目录名 kebab-case |
-| Hooks 层 | `src/hooks/` | 每个文件 | 文件名去后缀 kebab-case |
-
-**不视为独立模块的情况**：
-- 单文件入口（如 `App.tsx`, `index.js`）
-- 纯导出桶文件（`index.ts` 仅有 re-export）
-- 工具函数目录（`src/utils/`, `src/helpers/`）— 合并为一个模块
-- 生成文件（`*.generated.ts`）跳过
-
-## Token 管理
-
-- 大模块（>20 文件）拆分为子任务
-- 每个子任务分析 ≤10 文件
-- `package.json` 分析单独一个子任务
-- `android/` 和 `ios/` 原生代码只分析 bridge 文件
-- 自动生成的文件（`*.generated.ts`）跳过