react-native-convert

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 等
• 所有数值属性必须精确匹配原始值（包括小数）

步骤：

1. 提取行内样式：遍历所有元素，提取 style 属性
2. 语义化命名：
   • 文本组件：根据文本内容（navTitle、driverName）
   • 容器组件：根据功能（navBar、driverCard）
   • 图片组件：根据用途（backIcon、driverAvatar）
   • 禁止：container{ID} 或 comp{ID} 格式
3. 提取公共样式：
   • 找出相同语义化名称的组件
   • 分类：公共样式（字体、颜色、边框非位置） + 单独样式（布局、尺寸、间距、定位）
   • 合并样式对象：style={[styles.driverName, styles.driverName7055b1]}
4. 精确样式匹配：
   • 所有数值属性：width、height、margin、padding、fontSize、lineHeight 等必须精确匹配原始值（包括小数）
   • 定位属性：position、top、left、right、bottom 必须精确匹配
   • 颜色值：rgba 颜色值必须完全一致
   • 验证方法：转换完成后，对比每个元素的样式属性，确保所有值完全一致
5. 样式完整性验证（⚠️ 强制要求）：
   • 必须验证：对于每个元素，公共样式 + 单独样式 = 原始行内样式的完整集合
   • 验证方法：
     1. 提取原始行内样式的所有属性（包括 flexbox 属性：flexDirection、justifyContent、alignItems、display 等）
     2. 检查公共样式中是否包含所有非位置相关属性
     3. 检查单独样式中是否包含所有位置、尺寸、间距相关属性
     4. 确保两个样式对象合并后，所有属性都完整且值精确匹配
   • 常见遗漏属性：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 中连续出现或属于同一父组件

识别步骤：

1. 查找重复结构的容器（列表项、卡片等）
2. 检查是否有相同或相似的 DOM 结构重复出现
3. 识别数据项：文本内容、图片路径等变化的数据
4. 识别固定样式：不变的样式属性

数据结构定义：

• 提取数据字段：识别变化的（文本、图片）和固定的（样式）
• 定义结构：创建数组 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. 验证

验证项：

1. 结构规范性：
   • 转换为组件结构（View、Text、Image 等），不需要保持 HTML 结构，但需要保持视觉层级和逻辑关系
   • 验证组件结构符合 React Native 规范
2. 语义化命名：样式名称和图片名称都是语义化的
3. 样式完整性：
   • 所有行内样式已转换为 StyleSheet 样式
   • 所有样式在 styles.js 文件中有定义
   • 公共 + 单独样式组合正确，与原始行内样式一致
   • 验证所有数值属性（width、height、margin、padding、fontSize、lineHeight 等）必须精确匹配原始值（包括小数）
   • 代码中没有使用行内样式
4. 资源完整性：
   • 图片/字体路径正确，文件存在（已复制到代码文件夹）
   • 图片语义化命名后引用已更新
   • 字体文件复制后引用已更新
   • 图片使用 require() 导入
5. 交互功能：识别了选中态组件和按钮，添加了交互样式和逻辑
6. 循环渲染：识别了重复结构，使用 list.map() 和 key 属性实现循环渲染
7. 代码规范：代码符合 React Native 语法、文件结构、样式处理、交互实现、循环渲染规范

验证失败：

1. 识别问题：明确哪个验证项失败
2. 分析原因：为什么会出现
3. 修复问题：
   • 结构：确保符合 React Native 组件结构规范，保持视觉层级和逻辑关系
   • 样式：对比原始行内样式，确保转换完整，公共 + 单独样式组合正确，所有数值属性精确匹配
   • 资源：确认图片/字体已复制，路径引用已更新
   • 语义化：检查命名规则，重新生成并更新引用
   • 交互：检查组件识别，修正交互逻辑
   • 循环渲染：检查组件识别，修正循环代码
4. 重新验证：修复后完整验证
5. 确认通过：所有验证项通过后才能继续

验证输出格式：

✅ 代码转换验证：
- 结构规范性：通过/失败
- 语义化命名：通过/失败
- 样式完整性：通过/失败
- 资源完整性：通过/失败
- 交互功能：通过/失败
- 循环渲染：通过/失败
- 代码规范：通过/失败
- 验证结果：通过/失败
- 问题列表：[如果有问题，列出所有问题]