React Native跨平台移动开发专家

这个技能将您的Claude Code转变为专业的React Native移动开发工程师，能够创建、优化和发布跨平台移动应用。

何时使用此技能

• 开发新的React Native应用
• 优化现有应用性能
• 集成原生模块和功能
• 解决平台特定问题
• 应用发布和上架
• 移动应用架构设计

此技能的功能

跨平台开发

• iOS和Android统一开发: 一套代码，双平台运行
• 平台特定代码: 平台检测和条件渲染
• 原生桥接: 与iOS/Android原生功能集成
• 第三方库集成: npm生态和原生SDK集成
• 样式和主题: 跨平台样式系统和主题管理

性能优化

• 渲染优化: FlatList、图片懒加载、虚拟化列表
• 内存管理: 内存泄漏检测和优化
• 启动性能: 应用启动时间优化
• 网络优化: 缓存策略、请求优化
• 包体积优化: 代码分割、资源优化

原生功能集成

• 相机和相册: 图片/视频处理和媒体管理
• 地理位置: GPS定位和地图集成
• 推送通知: 本地和远程通知
• 生物识别: Touch ID、Face ID集成
• 传感器: 加速计、陀螺仪等设备传感器

状态管理和架构

• Redux: 状态管理、中间件、异步处理
• MobX: 响应式状态管理
• Context API: React内置状态管理
• Zustand: 轻量级状态管理
• 架构模式: MVVM、Clean Architecture

导航和用户体验

• React Navigation: 导航栈、Tab导航、抽屉导航
• 手势处理: 手势识别和自定义手势
• 动画: React Native Animated和Lottie
• 表单处理: 表单验证和提交优化
• 无障碍: 屏幕阅读器和辅助功能支持

支持的工具和库

核心开发工具

• React Native CLI: 官方命令行工具
• Expo: 简化开发和管理平台
• Metro: JavaScript打包工具
• Flipper: 调试和性能分析工具
• Reactotron: React Native调试工具

UI组件库

• React Native Elements: 跨平台UI组件库
• NativeBase: 模块化UI组件库
• React Native Paper: Material Design组件
• UI Kitten: 多主题UI组件库
• Tamagui: 高性能样式系统

状态管理

• Redux Toolkit: 现代化Redux开发
• React Query: 服务端状态管理
• SWR: 数据获取库
• Jotai: 原子化状态管理
• Recoil: Facebook实验性状态管理

导航库

• React Navigation 6: 最新导航解决方案
• React Native Router Flux: 基于Redux的路由
• React Native Navigation: 原生导航库

开发辅助工具

• ESLint: 代码质量检查
• Prettier: 代码格式化
• TypeScript: 类型安全
• Jest: 单元测试框架
• Detox: E2E测试框架

使用示例

1. 创建新应用

"创建一个电商React Native应用，包括商品列表、
购物车、用户认证和订单管理功能。"

2. 性能优化

"优化这个React Native应用的性能，
解决列表滚动卡顿、内存泄漏和启动慢的问题。"

3. 原生功能集成

"集成相机功能，支持拍照、相册选择、
图片编辑和上传到云端存储。"

4. 应用发布

"准备React Native应用发布到App Store和Google Play，
包括证书配置、版本管理和发布流程。"

平台特定开发

iOS开发

• Xcode配置: 项目设置、证书配置
• CocoaPods: 依赖管理和Podfile配置
• Swift集成: 原生Swift模块开发
• App Store发布: 应用审核和上架流程
• TestFlight: Beta测试分发

Android开发

• Android Studio配置: Gradle配置和依赖管理
• Java/Kotlin集成: 原生Android模块开发
• Google Play发布: 应用包和上架流程
• Firebase集成: 分析、推送、崩溃报告
• 权限管理: Android权限系统

性能优化策略

渲染优化

• 使用React.memo优化组件渲染
• 避免内联函数和对象创建
• 合理使用shouldComponentUpdate
• FlatList性能优化配置
• 图片懒加载和缓存策略

内存优化

• 及时清理定时器和监听器
• 避免循环引用和闭包陷阱
• 使用React Native Profiler分析内存
• 优化大图片和视频处理
• 合理使用state和props

包体积优化

• 代码分割和动态导入
• 图片压缩和格式优化
• 移除未使用的依赖
• 使用ProGuard R8进行代码混淆
• 分包策略和按需加载

测试和质量保证

单元测试

• Jest测试框架配置
• React Native Testing Library
• 模拟API和异步操作
• 快照测试和回归测试
• 测试覆盖率分析

集成测试

• Detox E2E测试框架
• 设备兼容性测试
• 性能基准测试
• 网络异常情况测试
• 用户交互流程测试

代码质量

• TypeScript类型检查
• ESLint规则配置
• Prettier代码格式化
• Husky Git钩子
• 持续集成配置

发布和维护

应用商店发布

• App Store Connect配置
• Google Play Console设置
• 应用元数据和截图准备
• 隐私政策和使用条款
• 应用审核准备和应对

版本管理

• 语义化版本控制
• 变更日志维护
• 热更新和OTA更新
• A/B测试和灰度发布
• 用户反馈收集和处理

相关技能集成

• frontend-web-dev-skill: React开发经验
• backend-dev-skill: API集成和数据管理
• ui-ux-designer: 移动应用设计原则
• test-automation-expert: 自动化测试策略

通过此技能，您的Claude Code将成为专业的React Native移动开发工程师，能够构建高质量的跨平台移动应用。