File contents
name: mobile
description: 移动开发。iOS、Android、SwiftUI、Jetpack Compose、React Native、Flutter、跨平台。当用户提到移动开发、iOS、Android、跨平台时路由到此。
license: MIT
user-invocable: false
disable-model-invocation: false
移动开发域 · Mobile Development
域概览
原生开发 跨平台开发
├── iOS (SwiftUI/UIKit) ├── React Native (JS/TS)
├── Android (Compose/Kotlin) └── Flutter (Dart)
└── 共通:MVVM / 网络层 / 持久化 / 测试
iOS 开发
SwiftUI 核心模式
View 组件:struct MyView: View { var body: some View { ... } }
State 管理:
@State — 本地状态
@Binding — 父子双向绑定
@StateObject — 拥有 ObservableObject
@ObservedObject — 引用 ObservableObject
@EnvironmentObject / @Environment — 全局注入
ObservableObject:@Published 属性自动触发 UI 更新
Custom ViewModifier:struct CardModifier: ViewModifier + extension View { func cardStyle() }
生命周期:.task { await ... } / .onAppear / .onDisappear
UIKit 集成
UIViewControllerRepresentable:包装 UIViewController 到 SwiftUI
UIViewRepresentable:包装 UIView 到 SwiftUI
Coordinator 模式:处理 delegate 回调
Auto Layout:NSLayoutConstraint.activate([...]) + translatesAutoresizingMaskIntoConstraints = false
Combine 响应式
Publisher:URLSession.shared.dataTaskPublisher → map → decode → eraseToAnyPublisher
订阅:.sink(receiveCompletion:receiveValue:) + .store(in: &cancellables)
常用 Operators:debounce / removeDuplicates / combineLatest / flatMap
Subject:PassthroughSubject(无初始值)/ CurrentValueSubject(有初始值)
iOS 架构
MVVM(推荐):
Model:Codable 数据结构
Repository:protocol + async throws 方法
ViewModel:@MainActor class VM: ObservableObject + @Published 属性
View:@StateObject private var viewModel = VM()
VIPER(复杂场景):
View ←→ Presenter ←→ Interactor → Entity
Router 处理导航
网络层
APIClient:泛型 func get<T: Decodable>(_ path:) async throws -> T
Token 管理:request.setValue("Bearer \(token)", forHTTPHeaderField: "Authorization")
错误处理:enum APIError: Error { case invalidURL, invalidResponse, httpError(Int) }
数据持久化
UserDefaults:@propertyWrapper struct UserDefault<T> 简化访问
Keychain:SecItemAdd / SecItemCopyMatching 存储敏感数据
Core Data:NSPersistentContainer + NSManagedObjectContext
SwiftData(iOS 17+):@Model 宏简化持久化
iOS Checklist
Android 开发
Jetpack Compose 核心模式
Composable:@Composable fun MyScreen() { ... }
State 管理:
remember { mutableStateOf(value) } — 本地状态
rememberSaveable — 跨配置变更保存
derivedStateOf — 派生状态避免重组
LazyColumn:items(list, key = { it.id }) 提供稳定 key
Side Effects:
LaunchedEffect(key) — 启动协程
DisposableEffect(key) — 清理资源(onDispose)
SideEffect — 同步状态到外部
snapshotFlow { state } — 监听状态变化转 Flow
Navigation:NavHost + composable(route) + navController.navigate()
Custom Modifier:fun Modifier.myModifier(): Modifier = composed { ... }
ViewModel + StateFlow
StateFlow(推荐替代 LiveData):
MutableStateFlow(UiState()) + .asStateFlow()
_uiState.update { it.copy(isLoading = true) }
Compose 中:val uiState by viewModel.uiState.collectAsState()
UiState data class:封装 loading / error / data
Kotlin Coroutines & Flow
协程:viewModelScope.launch { withContext(Dispatchers.IO) { ... } }
并发:coroutineScope { val a = async { ... }; val b = async { ... } }
Flow:flow { emit(value) } + .flowOn(Dispatchers.IO)
StateFlow:.stateIn(scope, SharingStarted.WhileSubscribed(5000), initial)
搜索防抖:searchQuery.debounce(300).filter { it.isNotEmpty() }.flatMapLatest { ... }
Channel:Channel<Event>(BUFFERED) + .receiveAsFlow() 一次性事件
依赖注入 (Hilt)
@HiltAndroidApp Application + @AndroidEntryPoint Activity
@Module @InstallIn(SingletonComponent::class) 提供依赖
@Provides @Singleton 提供实例 / @Binds 绑定接口
ViewModel:@HiltViewModel class VM @Inject constructor(repo) + hiltViewModel()
Room 数据库
Entity:@Entity(tableName) + @PrimaryKey + @ColumnInfo
DAO:@Query / @Insert(onConflict = REPLACE) / @Delete + 返回 Flow<List<T>>
Database:@Database(entities, version) + Room.databaseBuilder
网络层 (Retrofit)
ApiService:@GET / @POST / @Path / @Query / @Body / @Multipart
Interceptor:AuthInterceptor 注入 Bearer Token
OkHttpClient:addInterceptor + connectTimeout
Android Checklist
跨平台开发
React Native vs Flutter
维度
React Native
Flutter
语言
TypeScript
Dart
渲染
原生组件(桥接)
自绘引擎(Skia)
性能
接近原生
接近原生
热重载
Fast Refresh
Hot Reload
生态
npm(成熟)
pub.dev(快速增长)
UI 一致性
跟随系统
完全一致
包体积
~7MB
~15MB
React Native 核心模式
组件:函数组件 + Hooks(useState / useEffect / useCallback / useMemo)
列表:FlatList + keyExtractor + initialNumToRender + windowSize
Navigation:@react-navigation/native + createNativeStackNavigator
状态管理:Redux Toolkit(createSlice + createAsyncThunk)/ Zustand
原生桥接:NativeModules 调用 iOS(Swift) / Android(Kotlin) 原生代码
性能:React.memo / Hermes 引擎 / 新架构 JSI(无桥接序列化)
Flutter 核心模式
Widget:StatelessWidget / StatefulWidget + setState
状态管理:
Provider:ChangeNotifier + Consumer / context.watch
Riverpod(推荐):FutureProvider / StateNotifierProvider + ref.watch
Navigation:go_router(GoRoute + context.go/push/pop)
原生桥接:MethodChannel + Platform Channels(iOS Swift / Android Kotlin)
性能:const 构造函数 / ListView.builder / RepaintBoundary / ValueKey
选型建议
场景
推荐
理由
团队有 Web 背景
React Native
学习成本低
追求极致性能/动画
Flutter
自绘引擎 60fps
UI 高度定制
Flutter
完全控制渲染
大量原生交互
React Native
桥接生态成熟
需要原生极致体验
原生开发
无桥接开销
跨平台 Checklist
通用最佳实践
实践
说明
MVVM 架构
分离 UI / 业务逻辑 / 数据层
依赖注入
Hilt(Android) / Protocol(iOS) / Context(RN)
响应式状态
StateFlow / Combine / Hooks / Riverpod
网络层封装
统一错误处理 + Token 管理 + 重试
本地持久化
Room / Core Data / AsyncStorage / Hive
列表优化
懒加载 + 稳定 key + 缓存
测试覆盖
ViewModel 单元测试 + UI 测试关键流程
触发词
iOS、SwiftUI、UIKit、Combine、Android、Jetpack Compose、Kotlin、React Native、Flutter、跨平台、移动开发、MVVM
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1 --- 2 name: telagod-code-abyss-mobile 3 description: --- 4 --- 5 --- 6 name: mobile 7 description: 移动开发。iOS、Android、SwiftUI、Jetpack Compose、React Native、Flutter、跨平台。当用户提到移动开发、iOS、Android、跨平台时路由到此。 8 license: MIT 9 user-invocable: false 10 disable-model-invocation: false 11 --- 12 13 # 移动开发域 · Mobile Development 14 15 ## 域概览 16 17 ``` 18 原生开发 跨平台开发 19 ├── iOS (SwiftUI/UIKit) ├── React Native (JS/TS) 20 ├── Android (Compose/Kotlin) └── Flutter (Dart) 21 └── 共通:MVVM / 网络层 / 持久化 / 测试 22 ``` 23 24 --- 25 26 ## iOS 开发 27 28 ### SwiftUI 核心模式 29 30 - View 组件:`struct MyView: View { var body: some View { ... } }` 31 - State 管理: 32 - `@State` — 本地状态 33 - `@Binding` — 父子双向绑定 34 - `@StateObject` — 拥有 ObservableObject 35 - `@ObservedObject` — 引用 ObservableObject 36 - `@EnvironmentObject` / `@Environment` — 全局注入 37 - ObservableObject:`@Published` 属性自动触发 UI 更新 38 - Custom ViewModifier:`struct CardModifier: ViewModifier` + `extension View { func cardStyle() }` 39 - 生命周期:`.task { await ... }` / `.onAppear` / `.onDisappear` 40 41 ### UIKit 集成 42 43 - UIViewControllerRepresentable:包装 UIViewController 到 SwiftUI 44 - UIViewRepresentable:包装 UIView 到 SwiftUI 45 - Coordinator 模式:处理 delegate 回调 46 - Auto Layout:`NSLayoutConstraint.activate([...])` + `translatesAutoresizingMaskIntoConstraints = false` 47 48 ### Combine 响应式 49 50 - Publisher:`URLSession.shared.dataTaskPublisher` → `map` → `decode` → `eraseToAnyPublisher` 51 - 订阅:`.sink(receiveCompletion:receiveValue:)` + `.store(in: &cancellables)` 52 - 常用 Operators:`debounce` / `removeDuplicates` / `combineLatest` / `flatMap` 53 - Subject:`PassthroughSubject`(无初始值)/ `CurrentValueSubject`(有初始值) 54 55 ### iOS 架构 56 57 MVVM(推荐): 58 - Model:`Codable` 数据结构 59 - Repository:`protocol` + `async throws` 方法 60 - ViewModel:`@MainActor class VM: ObservableObject` + `@Published` 属性 61 - View:`@StateObject private var viewModel = VM()` 62 63 VIPER(复杂场景): 64 - View ←→ Presenter ←→ Interactor → Entity 65 - Router 处理导航 66 67 ### 网络层 68 69 - APIClient:泛型 `func get<T: Decodable>(_ path:) async throws -> T` 70 - Token 管理:`request.setValue("Bearer \(token)", forHTTPHeaderField: "Authorization")` 71 - 错误处理:`enum APIError: Error { case invalidURL, invalidResponse, httpError(Int) }` 72 73 ### 数据持久化 74 75 - UserDefaults:`@propertyWrapper struct UserDefault<T>` 简化访问 76 - Keychain:`SecItemAdd` / `SecItemCopyMatching` 存储敏感数据 77 - Core Data:`NSPersistentContainer` + `NSManagedObjectContext` 78 - SwiftData(iOS 17+):`@Model` 宏简化持久化 79 80 ### iOS Checklist 81 82 - [ ] SwiftUI 优先,UIKit 按需集成 83 - [ ] `@MainActor` 确保 UI 线程安全 84 - [ ] async/await 替代回调 85 - [ ] 依赖注入提升可测试性 86 - [ ] LazyVStack/LazyHStack 优化大列表 87 - [ ] 图片缓存(NSCache)减少内存压力 88 - [ ] Keychain 存储敏感数据(非 UserDefaults) 89 - [ ] 单元测试覆盖 ViewModel + Mock Repository 90 91 --- 92 93 ## Android 开发 94 95 ### Jetpack Compose 核心模式 96 97 - Composable:`@Composable fun MyScreen() { ... }` 98 - State 管理: 99 - `remember { mutableStateOf(value) }` — 本地状态 100 - `rememberSaveable` — 跨配置变更保存 101 - `derivedStateOf` — 派生状态避免重组 102 - LazyColumn:`items(list, key = { it.id })` 提供稳定 key 103 - Side Effects: 104 - `LaunchedEffect(key)` — 启动协程 105 - `DisposableEffect(key)` — 清理资源(onDispose) 106 - `SideEffect` — 同步状态到外部 107 - `snapshotFlow { state }` — 监听状态变化转 Flow 108 - Navigation:`NavHost` + `composable(route)` + `navController.navigate()` 109 - Custom Modifier:`fun Modifier.myModifier(): Modifier = composed { ... }` 110 111 ### ViewModel + StateFlow 112 113 - StateFlow(推荐替代 LiveData): 114 - `MutableStateFlow(UiState())` + `.asStateFlow()` 115 - `_uiState.update { it.copy(isLoading = true) }` 116 - Compose 中:`val uiState by viewModel.uiState.collectAsState()` 117 - UiState data class:封装 loading / error / data 118 119 ### Kotlin Coroutines & Flow 120 121 - 协程:`viewModelScope.launch { withContext(Dispatchers.IO) { ... } }` 122 - 并发:`coroutineScope { val a = async { ... }; val b = async { ... } }` 123 - Flow:`flow { emit(value) }` + `.flowOn(Dispatchers.IO)` 124 - StateFlow:`.stateIn(scope, SharingStarted.WhileSubscribed(5000), initial)` 125 - 搜索防抖:`searchQuery.debounce(300).filter { it.isNotEmpty() }.flatMapLatest { ... }` 126 - Channel:`Channel<Event>(BUFFERED)` + `.receiveAsFlow()` 一次性事件 127 128 ### 依赖注入 (Hilt) 129 130 - `@HiltAndroidApp` Application + `@AndroidEntryPoint` Activity 131 - `@Module @InstallIn(SingletonComponent::class)` 提供依赖 132 - `@Provides @Singleton` 提供实例 / `@Binds` 绑定接口 133 - ViewModel:`@HiltViewModel class VM @Inject constructor(repo)` + `hiltViewModel()` 134 135 ### Room 数据库 136 137 - Entity:`@Entity(tableName)` + `@PrimaryKey` + `@ColumnInfo` 138 - DAO:`@Query` / `@Insert(onConflict = REPLACE)` / `@Delete` + 返回 `Flow<List<T>>` 139 - Database:`@Database(entities, version)` + `Room.databaseBuilder` 140 141 ### 网络层 (Retrofit) 142 143 - ApiService:`@GET` / `@POST` / `@Path` / `@Query` / `@Body` / `@Multipart` 144 - Interceptor:AuthInterceptor 注入 Bearer Token 145 - OkHttpClient:`addInterceptor` + `connectTimeout` 146 147 ### Android Checklist 148 149 - [ ] Compose 优先,View 系统按需使用 150 - [ ] StateFlow 替代 LiveData 151 - [ ] Hilt 依赖注入 152 - [ ] Room 本地持久化 153 - [ ] `key` 参数优化 LazyColumn 154 - [ ] `remember` / `derivedStateOf` 避免过度重组 155 - [ ] Coil 图片加载 + 缓存策略 156 - [ ] 单元测试覆盖 ViewModel(runTest + advanceUntilIdle) 157 158 --- 159 160 ## 跨平台开发 161 162 ### React Native vs Flutter 163 164 | 维度 | React Native | Flutter | 165 |------|--------------|---------| 166 | 语言 | TypeScript | Dart | 167 | 渲染 | 原生组件(桥接) | 自绘引擎(Skia) | 168 | 性能 | 接近原生 | 接近原生 | 169 | 热重载 | Fast Refresh | Hot Reload | 170 | 生态 | npm(成熟) | pub.dev(快速增长) | 171 | UI 一致性 | 跟随系统 | 完全一致 | 172 | 包体积 | ~7MB | ~15MB | 173 174 ### React Native 核心模式 175 176 - 组件:函数组件 + Hooks(useState / useEffect / useCallback / useMemo) 177 - 列表:`FlatList` + `keyExtractor` + `initialNumToRender` + `windowSize` 178 - Navigation:`@react-navigation/native` + `createNativeStackNavigator` 179 - 状态管理:Redux Toolkit(`createSlice` + `createAsyncThunk`)/ Zustand 180 - 原生桥接:`NativeModules` 调用 iOS(Swift) / Android(Kotlin) 原生代码 181 - 性能:`React.memo` / Hermes 引擎 / 新架构 JSI(无桥接序列化) 182 183 ### Flutter 核心模式 184 185 - Widget:StatelessWidget / StatefulWidget + `setState` 186 - 状态管理: 187 - Provider:`ChangeNotifier` + `Consumer` / `context.watch` 188 - Riverpod(推荐):`FutureProvider` / `StateNotifierProvider` + `ref.watch` 189 - Navigation:go_router(`GoRoute` + `context.go/push/pop`) 190 - 原生桥接:`MethodChannel` + Platform Channels(iOS Swift / Android Kotlin) 191 - 性能:`const` 构造函数 / `ListView.builder` / `RepaintBoundary` / `ValueKey` 192 193 ### 选型建议 194 195 | 场景 | 推荐 | 理由 | 196 |------|------|------| 197 | 团队有 Web 背景 | React Native | 学习成本低 | 198 | 追求极致性能/动画 | Flutter | 自绘引擎 60fps | 199 | UI 高度定制 | Flutter | 完全控制渲染 | 200 | 大量原生交互 | React Native | 桥接生态成熟 | 201 | 需要原生极致体验 | 原生开发 | 无桥接开销 | 202 203 ### 跨平台 Checklist 204 205 - [ ] 选型匹配团队技术栈和业务需求 206 - [ ] 列表优化:FlatList(RN) / ListView.builder(Flutter) + key 207 - [ ] 状态管理:Redux Toolkit(RN) / Riverpod(Flutter) 208 - [ ] 原生模块桥接方案验证 209 - [ ] 包体积优化:ProGuard(Android) / tree-shake-icons(Flutter) 210 - [ ] 性能基线:冷启动 < 1.5s / 渲染 > 55fps 211 212 --- 213 214 ## 通用最佳实践 215 216 | 实践 | 说明 | 217 |------|------| 218 | MVVM 架构 | 分离 UI / 业务逻辑 / 数据层 | 219 | 依赖注入 | Hilt(Android) / Protocol(iOS) / Context(RN) | 220 | 响应式状态 | StateFlow / Combine / Hooks / Riverpod | 221 | 网络层封装 | 统一错误处理 + Token 管理 + 重试 | 222 | 本地持久化 | Room / Core Data / AsyncStorage / Hive | 223 | 列表优化 | 懒加载 + 稳定 key + 缓存 | 224 | 测试覆盖 | ViewModel 单元测试 + UI 测试关键流程 | 225 226 ## 触发词 227 228 iOS、SwiftUI、UIKit、Combine、Android、Jetpack Compose、Kotlin、React Native、Flutter、跨平台、移动开发、MVVM 229 230 --- 231 > Converted and distributed by [TomeVault](https://tomevault.io/claim/telagod) — claim your Tome and manage your conversions. 232 <!-- tomevault:4.0:skill_md:2026-04-11 -->
tomevault-io/skills-registry/tree/main/telagod--code-abyss--mobile commit 8debbf11a0
Frequently asked questions How do I install the Telagod Code Abyss Mobile skill? Run npx skillmds@latest add tomevault-io/telagod-code-abyss-mobile 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 Telagod Code Abyss Mobile skill do? --- It is listed under Coding & Dev Tools on SkillMD.
Is Telagod Code Abyss Mobile 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 Telagod Code Abyss Mobile? 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 Telagod Code Abyss Mobile free to use? Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
Who published Telagod Code Abyss Mobile? tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.