react-native-expert skill

---
name: react-native-expert
description: React Native跨平台移动开发专家，精通iOS和Android应用开发、性能优化、原生模块集成和移动应用发布流程。能够构建高质量的移动应用。
---

# 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移动开发工程师，能够构建高质量的跨平台移动应用。**