File contents Taro to React Native 转换
快速开始
第一步:处理 taro2rnTODO.md
检查项目根目录是否存在 taro2rnTODO.md:
情况
操作
存在
读取进度,跳至第二步
不存在
执行初始化流程(见下方)
初始化流程
询问用户配置 :
配置项
默认值
说明
项目名称
当前目录名
标识项目
设计稿宽度
750
750 或 1242
RN 应用路径
.
React Native 应用相对路径
基于模板生成 taro2rnTODO.md :读取 assets/TODO_TEMPLATE.md,替换占位符后写入项目根目录。
第二步:执行转换
读取 Taro 源码,分析组件结构
按场景加载对应转换规则(见下方索引)
遇到问题查阅 references/KNOWN_ISSUES.md
完成后更新 taro2rnTODO.md
转换规则(按需加载)
转换场景
加载文件
包含内容
组件转换
references/components.md
基础组件映射、事件处理、Portal/RichText/WebView、导入汇总
API / 生命周期
references/api.md
路由、存储、网络、UI 反馈、页面生命周期、平台代码
样式转换
references/styles.md
rpx 单位、Flex、文字/边框/定位、不支持的 CSS、动态宽度
IM 聊天页面
references/im-layout.md
键盘避让、FlatList inverted、滚动监听、分页加载
已知问题
references/KNOWN_ISSUES.md
扩展依赖、样式差异、API 差异、Monorepo 问题
规则索引 + 速查
references/TRANSFORM_RULES.md
最常用映射速查表
加载策略 :先读 TRANSFORM_RULES.md 速查表,不够用时再加载对应场景的详细文件。
转换工作流
1. 处理 taro2rnTODO.md → 初始化或读取现有进度
2. 确认设计稿标准 → 750 用 rpx(),1242 用 rpx1242()
3. 读取 Taro 源码 → 分析组件结构
4. 应用转换规则 → 按需加载对应 references
5. 处理特殊情况 → 查阅 KNOWN_ISSUES.md
6. 更新 taro2rnTODO.md → 标记完成
文档结构
taro2rn/
├── SKILL.md # 入口(本文件)
├── references/
│ ├── TRANSFORM_RULES.md # 规则索引 + 速查表
│ ├── components.md # 组件映射详细规则
│ ├── api.md # API/生命周期映射
│ ├── styles.md # 样式转换规则
│ ├── im-layout.md # IM 页面布局方案
│ └── KNOWN_ISSUES.md # 已知问题和解决方案
└── assets/
└── TODO_TEMPLATE.md # 项目进度模板
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1 --- 2 name: ecomfe-agent-skill-taro2rn 3 description: Taro to React Native 转换 4 --- 5 6 # Taro to React Native 转换 7 8 ## 快速开始 9 10 ### 第一步:处理 taro2rnTODO.md 11 12 检查项目根目录是否存在 `taro2rnTODO.md`: 13 14 | 情况 | 操作 | 15 |------|------| 16 | **存在** | 读取进度,跳至第二步 | 17 | **不存在** | 执行初始化流程(见下方) | 18 19 #### 初始化流程 20 21 1. **询问用户配置**: 22 23 | 配置项 | 默认值 | 说明 | 24 |--------|--------|------| 25 | 项目名称 | 当前目录名 | 标识项目 | 26 | 设计稿宽度 | 750 | 750 或 1242 | 27 | RN 应用路径 | . | React Native 应用相对路径 | 28 29 2. **基于模板生成 taro2rnTODO.md**:读取 `assets/TODO_TEMPLATE.md`,替换占位符后写入项目根目录。 30 31 ### 第二步:执行转换 32 33 1. 读取 Taro 源码,分析组件结构 34 2. 按场景加载对应转换规则(见下方索引) 35 3. 遇到问题查阅 [references/KNOWN_ISSUES.md](references/KNOWN_ISSUES.md) 36 4. 完成后更新 `taro2rnTODO.md` 37 38 ## 转换规则(按需加载) 39 40 | 转换场景 | 加载文件 | 包含内容 | 41 |---------|---------|---------| 42 | **组件转换** | [references/components.md](references/components.md) | 基础组件映射、事件处理、Portal/RichText/WebView、导入汇总 | 43 | **API / 生命周期** | [references/api.md](references/api.md) | 路由、存储、网络、UI 反馈、页面生命周期、平台代码 | 44 | **样式转换** | [references/styles.md](references/styles.md) | rpx 单位、Flex、文字/边框/定位、不支持的 CSS、动态宽度 | 45 | **IM 聊天页面** | [references/im-layout.md](references/im-layout.md) | 键盘避让、FlatList inverted、滚动监听、分页加载 | 46 | **已知问题** | [references/KNOWN_ISSUES.md](references/KNOWN_ISSUES.md) | 扩展依赖、样式差异、API 差异、Monorepo 问题 | 47 | **规则索引 + 速查** | [references/TRANSFORM_RULES.md](references/TRANSFORM_RULES.md) | 最常用映射速查表 | 48 49 **加载策略**:先读 TRANSFORM_RULES.md 速查表,不够用时再加载对应场景的详细文件。 50 51 ## 转换工作流 52 53 ``` 54 1. 处理 taro2rnTODO.md → 初始化或读取现有进度 55 2. 确认设计稿标准 → 750 用 rpx(),1242 用 rpx1242() 56 3. 读取 Taro 源码 → 分析组件结构 57 4. 应用转换规则 → 按需加载对应 references 58 5. 处理特殊情况 → 查阅 KNOWN_ISSUES.md 59 6. 更新 taro2rnTODO.md → 标记完成 60 ``` 61 62 ## 文档结构 63 64 ``` 65 taro2rn/ 66 ├── SKILL.md # 入口(本文件) 67 ├── references/ 68 │ ├── TRANSFORM_RULES.md # 规则索引 + 速查表 69 │ ├── components.md # 组件映射详细规则 70 │ ├── api.md # API/生命周期映射 71 │ ├── styles.md # 样式转换规则 72 │ ├── im-layout.md # IM 页面布局方案 73 │ └── KNOWN_ISSUES.md # 已知问题和解决方案 74 └── assets/ 75 └── TODO_TEMPLATE.md # 项目进度模板 76 ``` 77 78 --- 79 > Converted and distributed by [TomeVault](https://tomevault.io/claim/ecomfe) — claim your Tome and manage your conversions. 80 <!-- tomevault:4.0:skill_md:2026-04-16 -->
tomevault-io/skills-registry/tree/main/ecomfe--agent-skill--taro2rn commit 7676058d44
Frequently asked questions How do I install the Ecomfe Agent Skill Taro2rn skill? Run npx skillmds@latest add tomevault-io/ecomfe-agent-skill-taro2rn in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
What does the Ecomfe Agent Skill Taro2rn skill do? Taro to React Native 转换 It is listed under Web & Frontend on SkillMD.
Is Ecomfe Agent Skill Taro2rn safe to use? This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
Which AI agents work with Ecomfe Agent Skill Taro2rn? This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Is Ecomfe Agent Skill Taro2rn free to use? Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
Who published Ecomfe Agent Skill Taro2rn? tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.