react-to-ios

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React to iOS: Feature Parity Implementation

React转iOS：功能对等实现

Use React/React Native code as the reference to implement the equivalent native iOS feature. Not a literal translation - understand what the React code does, then implement it idiomatically for iOS.

Use this when:

Porting a feature from React/React Native to native iOS
React is the "source of truth" for a feature
Building native iOS alternatives to web components
Migrating from React Native to native Swift

以React/React Native代码为参考，实现等效的原生iOS功能。并非字面翻译——要理解React代码的实际作用，然后以符合iOS规范的方式实现。

适用场景：

将功能从React/React Native移植到原生iOS
React是某功能的「基准实现」
为Web组件构建原生iOS替代方案
从React Native迁移到原生Swift

Key Principle

核心原则

React Code → Understand Feature → Match iOS Codebase Patterns → Implement
                 (what)                  (how it's done here)

Preserved: Feature behavior, data structure shapes, business logic, user flows, API contracts Adapted: Language idioms, frameworks, UI patterns to match the iOS codebase

React代码 → 理解功能 → 匹配iOS代码库模式 → 实现
                 (功能是什么)                  (这里的实现方式)

保留内容： 功能行为、数据结构形态、业务逻辑、用户流程、API契约 适配内容： 语言习惯、框架、UI模式，以匹配iOS代码库

Common Mappings Reference

常见映射参考

React/React Native	iOS/Swift Equivalent
`useState`	`@State` / `@Published`
`useEffect`	`.onAppear` / `.task` / `viewDidLoad`
`useContext`	Environment objects / Dependency injection
`useMemo` / `useCallback`	Computed properties / lazy vars
`useReducer`	State machine / Combine
Props	Init parameters / Bindings
`View` / `div`	SwiftUI `View` / UIKit `UIView`
`Text`	`Text` / `UILabel`
`Image`	`Image` / `UIImageView`
`ScrollView`	`ScrollView` / `UIScrollView`
`FlatList`	`List` / `LazyVStack` / `UITableView`
`TouchableOpacity`	`Button` / tap gestures
`TextInput`	`TextField` / `UITextField`
`StyleSheet`	SwiftUI modifiers / UIKit constraints
`fetch` / `axios`	`URLSession` / async-await
Redux / Zustand	Combine / SwiftUI state / TCA
React Navigation	`NavigationStack` / `UINavigationController`
React Query / SWR	Async/await patterns / Combine
Styled Components	View modifiers / custom ViewModifiers
Context Providers	`@EnvironmentObject` / DI containers

React/React Native	iOS/Swift 等效方案
`useState`	`@State` / `@Published`
`useEffect`	`.onAppear` / `.task` / `viewDidLoad`
`useContext`	Environment对象 / 依赖注入
`useMemo` / `useCallback`	计算属性 / 延迟变量
`useReducer`	状态机 / Combine
Props	初始化参数 / Bindings
`View` / `div`	SwiftUI `View` / UIKit `UIView`
`Text`	`Text` / `UILabel`
`Image`	`Image` / `UIImageView`
`ScrollView`	`ScrollView` / `UIScrollView`
`FlatList`	`List` / `LazyVStack` / `UITableView`
`TouchableOpacity`	`Button` / 点击手势
`TextInput`	`TextField` / `UITextField`
`StyleSheet`	SwiftUI修饰符 / UIKit约束
`fetch` / `axios`	`URLSession` / async-await
Redux / Zustand	Combine / SwiftUI状态管理 / TCA
React Navigation	`NavigationStack` / `UINavigationController`
React Query / SWR	Async/await模式 / Combine
Styled Components	View修饰符 / 自定义ViewModifiers
Context Providers	`@EnvironmentObject` / 依赖注入容器

Workflow

工作流程

Step 0: Gather Context

步骤0：收集上下文信息

Ask the user for both pieces of information:

To port a feature from React to iOS, I need:

1. PATH TO REACT CODEBASE (source of truth)
   Where is the React/React Native project located?
   Example: /path/to/react-app or ../react-native-app

2. FEATURE TO IMPLEMENT
   What feature or component should I port?
   Example: "UserProfile component" or "the checkout flow" or "src/components/Dashboard"

Assumptions:

Current working directory = iOS codebase (target)
User provides path to React codebase (source)

If the user already provided this info, proceed. Otherwise, ask.

向用户询问以下两项信息：

要将功能从React移植到iOS，我需要：

1. React代码库路径（基准实现）
   React/React Native项目的位置在哪里？
   示例：/path/to/react-app 或 ../react-native-app

2. 要实现的功能
   要移植哪个功能或组件？
   示例："UserProfile组件" 或 "结账流程" 或 "src/components/Dashboard"

假设条件：

当前工作目录 = iOS代码库（目标）
用户提供React代码库路径（源）

如果用户已提供这些信息，直接进行下一步。否则，询问用户。

Step 1: Locate the React Feature

步骤1：定位React功能

Navigate to the React codebase path and find the relevant files:

Go to the React path provided
Find files related to the feature (components, hooks, stores, utils)
Read and understand the implementation

Files to look for:

Component files (
```
.tsx
```
,
```
.jsx
```
,
```
.js
```
)
Custom hooks (
```
use*.ts
```
)
State management (Redux slices, Zustand stores, Context)
API services
Types/interfaces (
```
.ts
```
,
```
.d.ts
```
)
Styles (CSS modules, styled-components, StyleSheet)

导航到React代码库路径并找到相关文件：

进入用户提供的React路径
找到与功能相关的文件（组件、钩子、状态存储、工具类）
阅读并理解实现逻辑

需要查找的文件：

组件文件（
```
.tsx
```
,
```
.jsx
```
,
```
.js
```
）
自定义钩子（
```
use*.ts
```
）
状态管理文件（Redux切片、Zustand存储、Context）
API服务文件
类型/接口文件（
```
.ts
```
,
```
.d.ts
```
）
样式文件（CSS模块、styled-components、StyleSheet）

Step 2: Analyze the React Code

步骤2：分析React代码

Thoroughly understand:

Aspect	What to Extract
Feature Behavior	What does this feature do? User-facing functionality
Component Structure	Component hierarchy, props, composition patterns
State Management	useState, useReducer, Redux, Context usage
Side Effects	useEffect patterns, data fetching, subscriptions
Business Logic	Validations, transformations, calculations
API Contracts	Network calls, request/response shapes
UI Flow	Screens, navigation, user interactions
Edge Cases	Error handling, loading states, empty states

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
                  REACT FEATURE ANALYSIS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

深入理解以下内容：

维度	需要提取的信息
功能行为	该功能的作用是什么？面向用户的功能
组件结构	组件层级、Props、组合模式
状态管理	useState、useReducer、Redux、Context的使用方式
副作用处理	useEffect模式、数据获取、订阅逻辑
业务逻辑	验证、转换、计算逻辑
API契约	网络请求、请求/响应格式
UI流程	页面、导航、用户交互
边界情况	错误处理、加载状态、空状态

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
                  React功能分析
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Feature: [Name]

功能：[名称]

What It Does

功能描述

[User-facing description]

[面向用户的功能说明]

Component Structure

组件结构

[Component hierarchy and relationships]

[组件层级和关系]

Props & State

Props与状态

[Key props, state variables, their purposes]

[关键Props、状态变量及其用途]

Side Effects

副作用处理

[What useEffect/data fetching does]

[useEffect/数据获取的作用]

Business Logic

业务逻辑

[Core logic summary]

[核心逻辑总结]

API Calls

API请求

[Endpoints, request/response shapes]

[接口地址、请求/响应格式]

UI Flow

UI流程

[Screens, navigation, interactions]

[页面、导航、交互逻辑]

Edge Cases Handled

处理的边界情况

[Case 1]
[Case 2]

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

undefined

[情况1]
[情况2]

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

undefined

Step 3: Analyze iOS Codebase Patterns

步骤3：分析iOS代码库模式

Before implementing, understand how THIS iOS codebase does things:

Check if
.claude/codebase-style.md
exists - If yes, use it and skip manual analysis
Find similar features in the codebase
Note the patterns used:
- Architecture pattern (MVVM, MVC, TCA, VIPER)
- UI framework (SwiftUI vs UIKit)
- State management approach
- Networking approach
- Dependency injection
- File/folder organization
- Naming conventions

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
                 iOS CODEBASE PATTERNS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Style Guide: [Found / Not found]

Patterns observed from existing code:
- Architecture: [MVVM / MVC / TCA / VIPER / etc.]
- UI Framework: [SwiftUI / UIKit / Mixed]
- State: [how state is managed]
- Networking: [how API calls are made]
- DI: [how dependencies are injected]
- Navigation: [how navigation works]

Similar features to reference:
- [Feature 1]: [path]
- [Feature 2]: [path]

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

在实现之前，先了解当前iOS代码库的实现方式：

检查是否存在
.claude/codebase-style.md
- 如果存在，直接使用该文件，跳过手动分析
在代码库中找到类似功能
记录使用的模式：
- 架构模式（MVVM、MVC、TCA、VIPER）
- UI框架（SwiftUI vs UIKit）
- 状态管理方式
- 网络请求方式
- 依赖注入方式
- 文件/文件夹组织方式
- 命名规范

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
                 iOS代码库模式
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

风格指南：[已找到 / 未找到]

从现有代码中观察到的模式：
- 架构：[MVVM / MVC / TCA / VIPER / 其他]
- UI框架：[SwiftUI / UIKit / 混合]
- 状态管理：[状态管理方式]
- 网络请求：[API请求实现方式]
- 依赖注入：[依赖注入方式]
- 导航：[导航实现方式]

可参考的类似功能：
- [功能1]：[路径]
- [功能2]：[路径]

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Step 4: Create Implementation Plan

步骤4：制定实现计划

Map the React feature to iOS equivalents using the patterns from Step 3:

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
                  IMPLEMENTATION PLAN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

使用步骤3中总结的模式，将React功能映射到iOS等效实现：

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
                  实现计划
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Files to Create

要创建的文件

#	File	Purpose	React Equivalent
1	[path matching codebase conventions]	[purpose]	[React file]
2	...	...	...

序号	文件路径	用途	React等效文件
1	[符合代码库规范的路径]	[用途]	[React文件]
2	...	...	...

Key Mappings

核心映射关系

React Concept	iOS Equivalent (matching codebase patterns)
[React thing]	[iOS equivalent as done in this codebase]
...	...

React概念	iOS等效实现（匹配代码库模式）
[React概念]	[符合当前代码库模式的iOS实现方式]
...	...

State Migration

状态迁移

React State	iOS State Management
[useState/Redux/etc.]	[How it maps to iOS patterns]

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

undefined

React状态	iOS状态管理方式
[useState/Redux等]	[映射到iOS模式的方式]

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

undefined

Step 5: Implement

步骤5：实现代码

Create the iOS implementation:

Match the codebase's existing patterns exactly
Use the same architecture, UI patterns, state management as other features
Follow the same naming conventions
Keep data structure shapes equivalent for API compatibility
Translate React patterns to idiomatic Swift/SwiftUI

Pattern Translation Tips:

React Pattern	iOS Implementation
Component with props	`View` with init parameters or `@Binding`
useState + setState	`@State` property with direct mutation
useEffect on mount	`.onAppear` or `.task` modifier
useEffect with deps	`.onChange(of:)` modifier
useEffect cleanup	`.onDisappear` or `task` cancellation
Conditional rendering	`if/else` or `@ViewBuilder`
List mapping	`ForEach`
Event handlers	Action closures or Bindings
CSS/StyleSheet	SwiftUI modifiers or custom `ViewModifier`

⚠️ IMPORTANT: After creating each
.swift
file, register it with Xcode:

bash

ruby ${CLAUDE_PLUGIN_ROOT}/skills/add-to-xcode/scripts/add_to_xcode.rb <filepath>

Without this step, files won't appear in Xcode or compile. See the

add-to-xcode

skill.

创建iOS实现：

完全匹配代码库的现有模式
使用与其他功能相同的架构、UI模式、状态管理方式
遵循相同的命名规范
保持数据结构格式一致以确保API兼容性
将React模式转换为地道的Swift/SwiftUI实现

模式转换技巧：

React模式	iOS实现方式
带Props的组件	带初始化参数或 `@Binding` 的 `View`
useState + setState	可直接修改的 `@State` 属性
挂载时的useEffect	`.onAppear` 或 `.task` 修饰符
带依赖的useEffect	`.onChange(of:)` 修饰符
useEffect清理	`.onDisappear` 或task取消
条件渲染	`if/else` 或 `@ViewBuilder`
列表映射	`ForEach`
事件处理器	动作闭包或Bindings
CSS/StyleSheet	SwiftUI修饰符或自定义 `ViewModifier`

⚠️ 重要提示：创建每个
.swift
文件后，需在Xcode中注册：

bash

ruby ${CLAUDE_PLUGIN_ROOT}/skills/add-to-xcode/scripts/add_to_xcode.rb <filepath>

如果不执行此步骤，文件将不会出现在Xcode中，也无法编译。请参考

add-to-xcode

技能。

Step 6: Copy Assets (if needed)

步骤6：复制资源（如有需要）

If the feature uses assets, offer to copy them:

Assets that may need to be copied:

Images, icons (convert to Asset Catalog format)
Colors (convert to Color Sets)
Fonts
Lottie animations
Sounds

If assets are needed and the user wants them copied, use file operations to transfer and convert them appropriately for iOS.

如果功能使用了资源，可提供复制服务：

可能需要复制的资源：

图片、图标（转换为Asset Catalog格式）
颜色（转换为Color Sets）
字体
Lottie动画
音频

如果需要资源且用户希望复制，可通过文件操作将其转移并转换为适合iOS的格式。

Step 7: Report Results

步骤7：结果汇报

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
                 REACT → iOS COMPLETE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
                 React → iOS 移植完成
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Feature: [Name]

功能：[名称]

Files Created

创建的文件

File	Purpose
[path]	[description]

文件路径	用途
[路径]	[描述]

Feature Parity Checklist

功能对等检查清单

Core functionality matches React
Data structures equivalent
State management properly translated
Side effects handled
Error handling preserved
Loading states preserved
Edge cases handled
Matches iOS codebase patterns

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

---

核心功能与React一致
数据结构等效
状态管理已正确转换
副作用已处理
错误处理已保留
加载状态已保留
边界情况已处理
符合iOS代码库模式

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

---

Triggers

触发词

"react to ios"
"react native to ios"
"convert from react"
"port this react component to swift"
"implement this react feature for ios"
"ios version of this react code"
"native ios from react native"
"migrate react native to swift"

"react to ios"
"react native to ios"
"convert from react"
"port this react component to swift"
"implement this react feature for ios"
"ios version of this react code"
"native ios from react native"
"migrate react native to swift"

Integration with style-guide

与style-guide技能集成

Recommended: Run the

style-guide

skill on the iOS codebase first.

style guide    ← Run this first on iOS codebase
react to ios   ← Then run this

This generates

.claude/codebase-style.md

which this skill will automatically reference.

If style guide exists:

Skip manual pattern analysis (Step 3)
Reference the documented patterns directly
Ensure perfect consistency with existing code

If no style guide:

This skill will analyze patterns manually (Step 3)
Consider running
```
style-guide
```
first for better results

推荐流程： 先在iOS代码库上运行

style-guide

技能。

style guide    ← 先在iOS代码库上运行此命令
react to ios   ← 然后运行此命令

这会生成

.claude/codebase-style.md

文件，本技能会自动参考该文件。

如果存在风格指南：

跳过手动模式分析（步骤3）
直接参考已记录的模式
确保与现有代码完全一致

如果没有风格指南：

本技能会手动分析模式（步骤3）
建议先运行
```
style-guide
```
技能以获得更好的结果

Tips

提示

Don't translate literally - Understand the feature, then implement idiomatically
Match the codebase - Use the same patterns as existing iOS code
Keep data shapes equivalent - API compatibility matters
Handle paradigm differences - React is declarative but different from SwiftUI
Verify feature parity - Same behavior, not same code
Consider lifecycle differences - React component lifecycle ≠ SwiftUI view lifecycle
State is different - React re-renders on state change; SwiftUI uses property wrappers
Navigation differs - React Router/Navigation vs NavigationStack patterns

不要字面翻译 - 理解功能后，以符合iOS规范的方式实现
匹配代码库 - 使用与现有iOS代码相同的模式
保持数据格式一致 - API兼容性很重要
处理范式差异 - React是声明式的，但与SwiftUI有所不同
验证功能对等 - 确保行为一致，而非代码一致
考虑生命周期差异 - React组件生命周期 ≠ SwiftUI视图生命周期
状态管理不同 - React在状态变化时重新渲染；SwiftUI使用属性包装器
导航方式不同 - React Router/Navigation与NavigationStack模式不同