React Native MCP Server

React原生MCP服务器

](https://badge.fury.io/js/%40mrnitro360%2Freact-native-mcp-guide)     

专业人工智能驱动的React Native开发伙伴，具有专家级代码修复功能

*专家补救•自动修复•行业最佳实践•企业安全*

概述

为专业React Native开发团队设计的全面的模型上下文协议（MCP）服务器。该工具提供智能代码分析， 专家级自动代码修复、安全审计和性能优化，并提供生产就绪的修复程序。

🆕 v1.1.0-专家修复功能：

• 🔧 专家代码修正 -自动修复安全、性能和质量问题
• 🏗️ 高级重构 -全面的组件现代化和优化
• 🛡️ 安全修补程序 -自动硬编码的秘密迁移和漏洞修补
• ⚡ 性能修复 -内存泄漏预防和React Native优化
• 📝 生产就绪代码 -TypeScript接口、样式表提取、可访问性

主要优势：

• 🚀 加速发展 -自动代码分析、修复和测试生成
• 🔒 企业安全 -具有自动修复功能的漏洞检测
• 📊 质量保证 -行业标准测试框架和覆盖率分析
• ⚡ 性能优化 -具有自动修复功能的高级分析
• 🎯 最佳实践 -代码实现专家指导
• 🔄 自动更新 -与自动版本管理的持续集成

______________________________________________________________________

快速开始

先决条件

• Node.js 18.0或更高
• Claude CLI 或 克劳德桌面
• React Native 开发环境

安装

自动安装（推荐）

# Install globally via npm
npm install -g @mrnitro360/react-native-mcp-guide

# Configure with Claude CLI
claude mcp add react-native-guide npx @mrnitro360/react-native-mcp-guide

开发安装

# Clone repository
git clone https://github.com/MrNitro360/React-Native-MCP.git
cd React-Native-MCP

# Install dependencies and build
npm install && npm run build

# Add to Claude CLI
claude mcp add react-native-guide node ./build/index.js

验证

claude mcp list

核实一下 react-native-guide 显示为 连接 ✅

______________________________________________________________________

🆕 专家补救示例

前后对比：自动代码修复

❌ 之前（问题代码）：

const MyComponent = () => {
  const apiKey = "sk-1234567890abcdef"; // Hardcoded secret
  const [data, setData] = useState([]);
  
  useEffect(() => {
    console.log("API Key:", apiKey); // Sensitive logging
    fetch('http://api.example.com/data') // HTTP instead of HTTPS
      .then(response => response.json())
      .then(data => setData(data));
      
    const interval = setInterval(() => { // Memory leak
      console.log('Polling...');
    }, 1000);
  }, []);

  return (
    
      {data.map(item => ( // Performance issue
        {item.name}
      ))}
    
  );
};

✅ 之后（专家补救）：

interface Props {
  children?: React.ReactNode;
  onPress?: () => void;
}

const MyComponent: React.FC
 = () => {
  // TODO: Add API_KEY to your environment variables
  const apiKey = process.env.API_KEY || Config.API_KEY;
  const [data, setData] = useState([]);
  
  useEffect(() => {
    // Removed sensitive logging for security
    // console.log('[REDACTED - contains sensitive data]');
    
    // Upgraded to HTTPS for security
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
      
    const interval = setInterval(() => {
      console.log('Polling...');
    }, 1000);
    
    // Cleanup intervals to prevent memory leaks
    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
     item.id?.toString() || index.toString()}
      renderItem={({ item }) => (
        {item.name}
      )}
    />
  );
};

const styles = StyleSheet.create({
  itemText: {
    color: 'red'
  }
});

export default React.memo(MyComponent);

🎯 自动修复的内容：

• ✅ 安全：硬编码API密钥→ 环境变量
• ✅ 安全：敏感记录→ 消毒
• ✅ 安全：HTTP→ HTTPS升级
• ✅ 演出：滚动视图+地图→ 带keyExtractor的平面列表
• ✅ 记忆：增加了间隔清理以防止泄漏
• ✅ 最佳实践：内联样式→ 样式表.create
• ✅ 类型安全：添加了TypeScript接口
• ✅ 演出：用React.memo包裹

______________________________________________________________________

核心功能

🔧 专家代码修正（v1.1.0中的新功能）

🧪 高级测试套件

🔍 综合分析工具

📦 依赖管理

• 自动化包审核 -安全漏洞和过时的依赖关系
• 智能升级 -React Native兼容性验证
• 冲突解决 -依赖树优化
• 迁移助手 -弃用的软件包现代化

📚 专家知识库

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

______________________________________________________________________

使用示例

🔧 专家代码修正（新）

# Automatically fix all detected issues with expert-level solutions
claude "remediate_code with remediation_level='expert' and add_comments=true"

# Advanced component refactoring with performance optimization
claude "refactor_component with refactor_type='comprehensive' and include_tests=true"

# Security-focused remediation
claude "remediate_code with issues=['hardcoded_secrets', 'sensitive_logging'] and remediation_level='expert'"

# Performance-focused refactoring
claude "refactor_component with refactor_type='performance' and target_rn_version='latest'"

测试和质量保证

# Generate comprehensive component tests
claude "generate_component_test with component_name='LoginForm' and test_type='comprehensive'"

# Analyze testing strategy
claude "analyze_testing_strategy with focus_areas=['unit', 'accessibility', 'performance']"

# Generate coverage report
claude "analyze_test_coverage with coverage_threshold=85"

代码分析与优化

# Comprehensive codebase analysis with auto-remediation suggestions
claude "analyze_codebase_comprehensive"

# Performance optimization with specific focus areas
claude "analyze_codebase_performance with focus_areas=['memory_usage', 'list_rendering']"

# Security audit with vulnerability detection
claude "analyze_codebase_comprehensive with analysis_types=['security', 'performance']"

依赖管理

# Package upgrade recommendations
claude "upgrade_packages with update_level='minor'"

# Resolve dependency conflicts
claude "resolve_dependencies with fix_conflicts=true"

# Security vulnerability audit
claude "audit_packages with auto_fix=true"

现实世界场景

______________________________________________________________________

Claude桌面集成

NPM安装配置

添加到您的 claude_desktop_config.json:

{
  "mcpServers": {
    "react-native-guide": {
      "command": "npx",
      "args": ["@mrnitro360/react-native-mcp-guide@1.1.0"],
      "env": {}
    }
  }
}

开发配置

{
  "mcpServers": {
    "react-native-guide": {
      "command": "node",
      "args": ["/absolute/path/to/React-Native-MCP/build/index.js"],
      "env": {}
    }
  }
}

配置路径：

• 窗户： C:\Users\{Username}\Desktop\React-Native-MCP\build\index.js
• macOS/Linux： /Users/{Username}/Desktop/React-Native-MCP/build/index.js

______________________________________________________________________

开发与维护

地方发展

# Development with hot reload
npm run dev

# Production build
npm run build

# Production server
npm start

持续集成

本项目实施企业级CI/CD：

• ✅ 自动化版本管理 -具有自动增量的语义版本控制
• ✅ 持续部署 -合并时自动发布npm
• ✅ 发布自动化 -GitHub发布了全面的变更日志
• ✅ 质量门 -部署前构建验证和测试

更新管理

# Check current version
npm list -g @mrnitro360/react-native-mcp-guide

# Update to latest version
npm update -g @mrnitro360/react-native-mcp-guide

# Reconfigure Claude CLI
claude mcp remove react-native-guide
claude mcp add react-native-guide npx @mrnitro360/react-native-mcp-guide

______________________________________________________________________

技术规格

🎯 分析和补救能力

• 专家代码修正 -自动修复安全、性能和质量问题
• 高级组件重构 -通过测试生成实现全面现代化
• 综合代码库分析 -带修复的多维质量评估
• 企业安全审计 -具有自动修复功能的漏洞检测
• 性能智能 -内存、渲染和捆绑包优化，并修复
• 质量指标 -重构实现的复杂性分析
• 无障碍合规性 -WCAG 2.1 AA标准验证，自动修复
• 测试策略优化 -覆盖范围分析和框架建议

🛠️ 技术架构

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

🏢 企业功能

• 专家级补救 -高级工程师质量自动代码修复
• 生产就绪解决方案 -企业级安全和性能修复
• 专业报道 -执行层摘要和实施代码
• 安全第一架构 -全面的漏洞评估和修复
• 可扩展性规划 -具有重构的大规模应用程序设计模式
• 合规支持 -具有自动合规性修复的行业标准
• 多平台优化 -iOS和Android特定注意事项及修复

______________________________________________________________________

📋 更新日志

v1.1.0-专家代码修正（最新）

🚀 主要特点：

• ✨ 新: remediate_code 工具-专家级自动代码修复
• ✨ 新: refactor_component 工具-使用测试进行高级组件重构
• 🔧 增强：组件检测精度提高
• 🛡️ 安全：自动硬编码的秘密修复
• ⚡ 演出：内存泄漏预防和FlatList优化
• 📝 质量：TypeScript接口生成和StyleSheet提取
• 🎯 无障碍：WCAG符合自动修复

🎯 补救能力：

• 硬编码的秘密→ 环境变量
• 敏感测井→ 山宁泰代码
• HTTP请求→ HTTPS强制
• 内存泄漏→ 自动清理
• 行内样式→ 样式表.create
• 性能问题→ 优化模式
• 类型安全性→ TypeScript接口

v1.0.5-以前版本

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

______________________________________________________________________

支持与社区

资源

• 📦 **** -官方软件包存储库
• 🐙 **** -源代码和开发
• 🐛 问题追踪 -Bug报告和功能请求
• 📖 MCP文件 -模型上下文协议规范
• ⚛️ React原生文档 -React Native官方文档

贡献

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

许可证

该项目根据 MIT许可证。有关详细的条款和条件，请参阅许可证文件。

______________________________________________________________________

专业React原生开发，专家级修复

*通过自动化的专家级代码修复，使开发团队能够构建安全、高性能和可访问的移动应用程序*

🆕 v1.1.0-现在有专家代码修正！