# mrn-wand-rn-migration

> 支持从旧 MRN 库（@mtfe/empower-trantor-mrn、@mtfe/empower-mrn-components、@mtfe/empower-mrn-bizcomponents、@roo/roo-rn、@roo/roo-rn-plus、@sgfe/flower-rn、@ss/mtd-react-native）迁移 React Native 组件到 @sfe/wand-rn。包含自动检测、代码生成、API 映射指南和最佳实践。使用此 Skill 来: (1) 分析项目中需要迁移的组件, (2) 查询具体组件的迁移规则和示例, (3) 自动化导入语句替换, (4) 处理组件 API 的兼容性问题, (5) 创建适配器组件（如 Loading wrapper）

- Author: zerosrat
- Repository: zerosrat/sg-agent-skills
- Version: 20260209174952
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-09
- Source: https://github.com/zerosrat/sg-agent-skills
- Web: https://mule.run/skillshub/@@zerosrat/sg-agent-skills~mrn-wand-rn-migration:20260209174952

---

---
name: mrn-wand-rn-migration
description: "支持从旧 MRN 库（@mtfe/empower-trantor-mrn、@mtfe/empower-mrn-components、@mtfe/empower-mrn-bizcomponents、@roo/roo-rn、@roo/roo-rn-plus、@sgfe/flower-rn、@ss/mtd-react-native）迁移 React Native 组件到 @sfe/wand-rn。包含自动检测、代码生成、API 映射指南和最佳实践。使用此 Skill 来: (1) 分析项目中需要迁移的组件, (2) 查询具体组件的迁移规则和示例, (3) 自动化导入语句替换, (4) 处理组件 API 的兼容性问题, (5) 创建适配器组件（如 Loading wrapper）"
---

# mrn-wand-rn-migration Skill

一个 MRN 组件库迁移工具，用于帮助团队从旧的 MRN 组件库迁移到统一的 `@sfe/wand-rn` 库。

## 快速开始

### 1. 分析需要迁移的组件

要快速了解项目中有多少旧组件需要迁移，使用检测脚本：

```bash
python3 find_components_to_migrate.py --path /path/to/project
```

这将生成一份详细报告，列出：
- 每个文件中使用的旧组件
- 对应的 wand-rn 目标组件
- 具体的行号和导入语句

### 2. 查询组件迁移指南

若需了解特定组件的迁移方式，告诉我组件名称和源库，例如：
- "我如何迁移 Divider 组件？"
- "Button 组件的迁移需要注意什么？"
- "Indicator 组件如何迁移到 wand-rn？"

我会为你提供：
- 旧 API 和新 API 的完整对照
- 逐步迁移示例
- 常见陷阱和解决方案

## 完整迁移工作流

### 步骤 1：扫描和分析
```bash
# 生成完整迁移报告（JSON 格式便于后续处理）
python3 find_components_to_migrate.py \
  --path /path/to/project \
  --output migration-report.json \
  --json
```

### 步骤 2：按优先级迁移
根据使用频率和依赖关系优先迁移：
1. 基础组件（Divider、Button）- 依赖少，迁移简单
2. 加载组件（Indicator → Loading wrapper）- 需创建适配器
3. 业务组件（其他组件）- 依赖复杂，按需迁移

### 步骤 3：逐个组件迁移
对每个组件执行：

1. **查询迁移指南**
   - 查看 [`references/[lib]/[component].md`](references/[lib]/[component].md) 获取待迁移组件的迁移说明
   - 迁移组件范围：迁移 [`references/[lib]/[component].md`] 中存在的所有组件，迁移指南中不存在的组件不迁移。

  待迁移 lib 的 dir name 和 package name 的对应关系：

  ```
  references/
  ├── empower-trantor-mrn/           # @mtfe/empower-trantor-mrn
  ├── empower-mrn-components/        # @mtfe/empower-mrn-components
  │   ├── root/                      # 根路径（@mtfe/empower-mrn-components）
  │   └── shuguopai/                 # 蔬果派子库（@mtfe/empower-mrn-components/shuguopai）
  ├── empower-mrn-bizcomponents/    # @mtfe/empower-mrn-bizcomponents
  ├── roo-rn/                        # @roo/roo-rn
  ├── roo-rn-plus/                   # @roo/roo-rn-plus
  ├── flower-rn/                     # @sgfe/flower-rn
  └── mtd-react-native/              # @ss/mtd-react-native
  ```

2. **更新导入和 API**
   - 不要忘记更新 import 语句，迁移后的组件从 @sfe/wand-rn 引入
   - 根据指南修改代码
   - **特别提示**：对于 @mtfe/empower-mrn-components，需要区分根路径（root/）和 shuguopai 子库（shuguopai/），两者组件的迁移指南可能不同

## 重要约束

1. **只迁移 React 组件，不迁移函数 API**
   - 组件特征：PascalCase 命名，用作 JSX 标签（如 `<GeneralDialog />`）
   - 函数特征：camelCase 命名，作为函数调用（如 `showToast()`）
   - 只处理组件迁移，函数 API 由用户根据实际需求决定是否迁移

2. 除非迁移指南明确说明，否则不要创建包装器/适配器

3. **⚠️ 重要：没有完成迁移之前不要停下**
   - 在一次对话中启动了迁移任务后，必须坚持迁移到底，直到所有需要迁移的组件都已完成
   - 如果用户没有明确要求停止，不要在中途放弃任务
   - 即使过程中遇到困难或复杂情况，也要继续推进，寻求解决方案直到完成

## 迁移最佳实践

## 常见问题

**Q: 迁移后组件样式不对？**
A: 新组件可能有不同的默认样式。查看新 API 的 props（margin、padding、color 等），或使用 View 包装调整布局。

**Q: 旧组件的功能在新组件中找不到？**
A: 大多数功能都被迁移了，但可能使用了不同的 props。查看详细迁移指南了解所有可用选项。

## 迁移检查清单

为每个需要迁移的组件创建 PR 时，使用此清单：

- [ ] 导入语句已更新到 @sfe/wand-rn
- [ ] 组件 props 已根据新 API 调整
- [ ] 回调函数签名已验证
- [ ] 样式问题已解决
- [ ] TypeScript 类型无错误
- [ ] 功能在设备上已测试
- [ ] 无控制台警告或错误
- [ ] 代码已通过审查
- [ ] 相关文档已更新

## 版本支持

- wand-rn 版本：查询最新支持的版本
- Node.js：12.0.0+
- Python：3.6+（用于检测脚本）