react-native-convert

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 中连续出现或属于同一父组件