| name | react-native-convert |
| description | 将 HTML/Web 设计稿转换为 React Native 代码，包含文件结构、StyleSheet 样式、语义化命名、交互状态与循环渲染。在用户要求将 Figma/HTML 转成 React Native 或进行 RN 代码转换时使用。 |
React Native 代码转换
1. 代码文件结构生成
文件结构要求：
- 如果用户要求了文件结构，以用户要求的为准
- 如果没有要求，则使用默认结构：
App.tsx、styles.ts
2. 样式处理和语义化命名
样式处理规则：
- 使用
StyleSheet.create() 定义样式
- 不支持多 class 组合，需要合并样式对象：
style={[styles.driverName, styles.driverName7055b1]}
- 样式属性名使用驼峰命名：
backgroundColor、fontSize、marginTop 等
- 所有数值属性必须精确匹配原始值（包括小数）
步骤：
- 提取行内样式：遍历所有元素，提取
style 属性
- 语义化命名：
- 文本组件：根据文本内容（
navTitle、driverName）
- 容器组件：根据功能（
navBar、driverCard）
- 图片组件：根据用途（
backIcon、driverAvatar）
- 禁止：
container{ID} 或 comp{ID} 格式
- 提取公共样式：
- 找出相同语义化名称的组件
- 分类：公共样式（字体、颜色、边框非位置） + 单独样式（布局、尺寸、间距、定位）
- 合并样式对象：
style={[styles.driverName, styles.driverName7055b1]}
- 精确样式匹配：
- 所有数值属性：width、height、margin、padding、fontSize、lineHeight 等必须精确匹配原始值（包括小数）
- 定位属性：position、top、left、right、bottom 必须精确匹配
- 颜色值：rgba 颜色值必须完全一致
- 验证方法：转换完成后，对比每个元素的样式属性，确保所有值完全一致
- 样式完整性验证（⚠️ 强制要求）：
- 必须验证：对于每个元素，公共样式 + 单独样式 = 原始行内样式的完整集合
- 验证方法：
- 提取原始行内样式的所有属性（包括 flexbox 属性：flexDirection、justifyContent、alignItems、display 等）
- 检查公共样式中是否包含所有非位置相关属性
- 检查单独样式中是否包含所有位置、尺寸、间距相关属性
- 确保两个样式对象合并后，所有属性都完整且值精确匹配
- 常见遗漏属性：flexDirection、justifyContent、alignItems、alignSelf、flexWrap、columnGap 等 flexbox 属性
- 验证失败处理：必须修复后重新验证，不能跳过
要求：
- ⚠️ 强制要求：公共样式 + 单独样式 = 完整样式（不能丢失任何属性，包括所有 flexbox 属性）
- ⚠️ 强制要求：所有样式属性值必须精确匹配原始值
- ⚠️ 强制要求：必须使用组件（View、Text、Image 等），转换为组件结构，不需要保持 HTML 结构，但需要保持视觉层级和逻辑关系
- ⚠️ 强制要求：样式必须使用 StyleSheet，不能使用 CSS
- 图片路径使用
require() 导入
3. 识别交互组件并实现状态切换
选中态组件识别：
- 查找相同结构的容器（Tab 项、筛选选项）
- 检查样式差异：背景色、边框、文本颜色
- 添加状态样式：
filterTabActive、filterTabInactive
按钮组件识别：
- 检查是否包含可点击内容（文本或图标）
- 检查是否有视觉反馈样式（背景色、边框、圆角）
- 添加点击效果样式：
.clicked、.pressed
交互逻辑实现：
- 使用
onPress 事件：onPress={handlePress}
- 在组件中定义处理函数
- 通过
setState 更新状态，切换样式
4. 循环渲染支持
循环组件识别规则（必须满足所有条件）：
- 组件结构完全相同：类型、数量、层级完全一致
- 样式基本相同：公共样式相同，单独样式差异 ≤ 3 个属性
- 在 HTML 中连续出现：重复结构在 HTML 中连续出现或属于同一父组件
识别步骤：
- 查找重复结构的容器（列表项、卡片等）
- 检查是否有相同或相似的 DOM 结构重复出现
- 识别数据项：文本内容、图片路径等变化的数据
- 识别固定样式：不变的样式属性
数据结构定义：
- 提取数据字段：识别变化的（文本、图片）和固定的（样式）
- 定义结构：创建数组
const list = [{ id: 1, name: '...', icon: '...' }, ...]
- 命名规范：数组使用语义化名称（
driverList、tabItems），字段使用 camelCase（driverName、tabIcon）
循环实现规则：
- 使用方式：
{list.map((item, index) => <View key={index} style={styles.item}>...</View>)}
- 必须添加 key：每个循环项必须添加
key={index} 或 key={item.id} 属性
- 数据提取：从重复结构中提取数据，创建数据数组
要求：
- ⚠️ 强制要求：必须为每个循环项添加
key 属性
- ⚠️ 强制要求：必须使用组件（View、Text、Image 等）
5. 验证
验证项：
- 结构规范性：
- 转换为组件结构（View、Text、Image 等），不需要保持 HTML 结构，但需要保持视觉层级和逻辑关系
- 验证组件结构符合 React Native 规范
- 语义化命名：样式名称和图片名称都是语义化的
- 样式完整性：
- 所有行内样式已转换为 StyleSheet 样式
- 所有样式在 styles.js 文件中有定义
- 公共 + 单独样式组合正确，与原始行内样式一致
- 验证所有数值属性（width、height、margin、padding、fontSize、lineHeight 等）必须精确匹配原始值（包括小数）
- 代码中没有使用行内样式
- 资源完整性：
- 图片/字体路径正确，文件存在（已复制到代码文件夹）
- 图片语义化命名后引用已更新
- 字体文件复制后引用已更新
- 图片使用
require() 导入
- 交互功能：识别了选中态组件和按钮，添加了交互样式和逻辑
- 循环渲染：识别了重复结构，使用
list.map() 和 key 属性实现循环渲染
- 代码规范：代码符合 React Native 语法、文件结构、样式处理、交互实现、循环渲染规范
验证失败：
- 识别问题：明确哪个验证项失败
- 分析原因：为什么会出现
- 修复问题：
- 结构：确保符合 React Native 组件结构规范，保持视觉层级和逻辑关系
- 样式：对比原始行内样式，确保转换完整，公共 + 单独样式组合正确，所有数值属性精确匹配
- 资源：确认图片/字体已复制，路径引用已更新
- 语义化：检查命名规则，重新生成并更新引用
- 交互：检查组件识别，修正交互逻辑
- 循环渲染：检查组件识别，修正循环代码
- 重新验证：修复后完整验证
- 确认通过：所有验证项通过后才能继续
验证输出格式：
✅ 代码转换验证：
- 结构规范性：通过/失败
- 语义化命名：通过/失败
- 样式完整性：通过/失败
- 资源完整性：通过/失败
- 交互功能：通过/失败
- 循环渲染：通过/失败
- 代码规范：通过/失败
- 验证结果：通过/失败
- 问题列表：[如果有问题，列出所有问题]
