React Native MCP

🚀 React Native MCP Server

这是一款专为专业 React Native 开发团队打造的综合工具，它能提供智能代码分析、专家级的自动化代码修复、安全审计以及性能优化等功能，助力团队打造出高质量的生产级代码。

🚀 快速开始

前提条件

• Node.js 版本需 18.0 或更高
• 需安装 Claude CLI 或 Claude Desktop
• 具备 React Native 开发环境

安装

自动化安装（推荐）

# 通过 npm 全局安装
npm install -g @mrnitro360/react-native-mcp-guide

# 使用 Claude CLI 进行配置
claude mcp add react-native-guide npx @mrnitro360/react-native-mcp-guide

开发环境安装

# 克隆仓库
git clone https://github.com/MrNitro360/React-Native-MCP.git
cd React-Native-MCP

# 安装依赖并构建
npm install && npm run build

# 添加到 Claude CLI
claude mcp add react-native-guide node ./build/index.js

验证

claude mcp list

验证 react-native-guide 是否显示为 已连接 ✅

✨ 主要特性

🔧 专家级代码修复（v1.1.0 新增）

🧪 高级测试套件

🔍 综合分析工具

📦 依赖管理

• 自动化包审计 - 检测安全漏洞和过时依赖
• 智能升级 - 验证 React Native 兼容性
• 冲突解决 - 优化依赖树
• 迁移协助 - 对废弃包进行现代化处理

📚 专家知识库

• React Native 文档 - 完整的 API 参考和指南
• 架构模式 - 可扩展应用程序的设计原则
• 平台指南 - iOS 和 Android 特定的最佳实践
• 安全标准 - 移动应用程序安全框架

💻 使用示例

🔧 专家级代码修复（新增）

# 使用专家级解决方案自动修复所有检测到的问题
claude "remediate_code with remediation_level='expert' and add_comments=true"

# 进行高级组件重构并优化性能
claude "refactor_component with refactor_type='comprehensive' and include_tests=true"

# 专注于安全修复
claude "remediate_code with issues=['hardcoded_secrets', 'sensitive_logging'] and remediation_level='expert'"

# 专注于性能重构
claude "refactor_component with refactor_type='performance' and target_rn_version='latest'"

测试与质量保证

# 生成全面的组件测试
claude "generate_component_test with component_name='LoginForm' and test_type='comprehensive'"

# 分析测试策略
claude "analyze_testing_strategy with focus_areas=['unit', 'accessibility', 'performance']"

# 生成覆盖率报告
claude "analyze_test_coverage with coverage_threshold=85"

代码分析与优化

# 全面分析代码库并提供自动修复建议
claude "analyze_codebase_comprehensive"

# 针对特定领域进行性能优化
claude "analyze_codebase_performance with focus_areas=['memory_usage', 'list_rendering']"

# 进行安全审计并检测漏洞
claude "analyze_codebase_comprehensive with analysis_types=['security', 'performance']"

依赖管理

# 获取包升级建议
claude "upgrade_packages with update_level='minor'"

# 解决依赖冲突
claude "resolve_dependencies with fix_conflicts=true"

# 进行安全漏洞审计并自动修复
claude "audit_packages with auto_fix=true"

实际场景

🔧 技术细节

🎯 分析与修复能力

• 专家级代码修复 - 自动修复安全、性能和质量问题
• 高级组件重构 - 全面现代化并生成测试
• 综合代码库分析 - 多维度质量评估及修复
• 企业级安全审计 - 检测漏洞并自动修复
• 性能智能优化 - 优化内存、渲染和打包并提供修复方案
• 质量指标分析 - 分析复杂度并实施重构
• 可访问性合规 - 验证是否符合 WCAG 2.1 AA 标准并自动修复
• 测试策略优化 - 分析覆盖率并推荐框架

🛠️ 技术架构

• 12 个专业工具 - 覆盖完整的 React Native 开发生命周期及修复功能
• 2 个专家修复工具 - remediate_code 和 refactor_component
• 6 个专家提示模板 - 结构化开发工作流程
• 5 个资源库 - 提供全面的文档和最佳实践
• 行业标准测试生成 - 自动创建测试套件
• 多框架集成 - 集成 Jest、Detox、Maestro 和可访问性工具
• 实时覆盖率分析 - 提供详细报告及改进策略
• 生产级代码生成 - 专家级自动修复和重构

🏢 企业特性

• 专家级修复 - 资深工程师级别的自动代码修复
• 生产级解决方案 - 企业级安全和性能修复
• 专业报告 - 提供高管级摘要及实施代码
• 安全优先架构 - 全面评估漏洞并提供修复方案
• 可扩展性规划 - 大型应用程序设计模式及重构方案
• 合规支持 - 符合行业标准并自动修复合规问题
• 多平台优化 - 考虑 iOS 和 Android 特定需求并提供修复方案

📄 许可证

本项目采用 MIT 许可证。有关详细条款和条件，请参阅许可证文件。

📋 更新日志

v1.1.0 - 专家级代码修复（最新版本）

🚀 主要特性：

• ✨ 新增：remediate_code 工具 - 专家级自动代码修复
• ✨ 新增：refactor_component 工具 - 高级组件重构及测试
• 🔧 增强：组件检测准确性提高
• 🛡️ 安全：自动修复硬编码密钥问题
• ⚡ 性能：防止内存泄漏并优化 FlatList
• 📝 质量：生成 TypeScript 接口并提取 StyleSheet
• 🎯 可访问性：自动修复以符合 WCAG 标准

🎯 修复能力：

• 硬编码 API 密钥 → 环境变量
• 敏感日志记录 → 清理后的代码
• HTTP 请求 → 强制使用 HTTPS
• 内存泄漏 → 自动清理
• 内联样式 → 使用 StyleSheet.create
• 性能问题 → 优化模式
• 类型安全 → 添加 TypeScript 接口

v1.0.5 - 上一版本

• 综合分析工具
• 测试套件生成
• 依赖管理
• 性能优化指导

支持与社区

资源

• 📦 NPM 包 - 官方包仓库
• 🐙 GitHub 仓库 - 源代码和开发信息
• 🐛 问题跟踪 - 报告 bug 和提出功能请求
• 📖 MCP 文档 - 模型上下文协议规范
• ⚛️ React Native 文档 - 官方 React Native 文档

贡献

我们欢迎 React Native 社区的贡献。请查看我们的 贡献指南 以了解开发标准和提交流程。