React原生MCP服务器

Name: React原生MCP服务器
Author: MrNitro360

作者：MrNitro36017 星标更新：2025-08-13

安装使用来源：spider==github.com

项目介绍

React Native MCP Server

专业AI驱动的React Native开发助手，具备专家级代码修复功能

专家级修复 • 自动化修复 • 行业最佳实践 • 企业级安全

</div>

概述

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

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

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

关键优势：

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

快速开始

先决条件

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 是否显示为 已连接 ✅

🆕 专家级修复示例

自动代码修复前后的对比

❌ 前（有问题的代码）：

const MyComponent = () => {
  const apiKey = "sk-1234567890abcdef"; // 硬编码的秘密
  const [data, setData] = useState([]);
  
  useEffect(() => {
    console.log("API Key:", apiKey); // 敏感日志
    fetch('http://api.example.com/data') // 使用HTTP而非HTTPS
      .then(response => response.json())
      .then(data => setData(data));
      
    const interval = setInterval(() => { // 内存泄漏
      console.log('轮询...');
    }, 1000);
  }, []);

  return (
    <ScrollView>
      {data.map(item => ( // 性能问题
        <Text key={item.id} style={{color: 'red'}}>{item.name}</Text>
      ))}
    </ScrollView>
  );
};

✅ 后（专家级修复）：

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

const MyComponent: React.FC<Props> = () => {
  // TODO: 将API_KEY添加到环境变量中
  const apiKey = process.env.API_KEY || Config.API_KEY;
  const [data, setData] = useState([]);
  
  useEffect(() => {
    // 移除敏感日志以提高安全性
    // console.log('[REDACTED - 包含敏感数据]');
    
    // 升级到HTTPS以提高安全性
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
      
    const interval = setInterval(() => {
      console.log('轮询...');
    }, 1000);
    
    // 清理间隔以防止内存泄漏
    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <FlatList
      data={data}
      keyExtractor={(item, index) => item.id?.toString() || index.toString()}
      renderItem={({ item }) => (
        <Text style={styles.itemText}>{item.name}</Text>
      )}
    />
  );
};

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

export default React.memo(MyComponent);

🎯 自动修复了什么：

✅ 安全：硬编码的API密钥 → 环境变量
✅ 安全：敏感日志 → 已清理
✅ 安全：HTTP → 升级为HTTPS
✅ 性能：ScrollView + map → 使用keyExtractor的FlatList
✅ 内存：添加了间隔清理以防止泄漏
✅ 最佳实践：内联样式 → StyleSheet.create
✅ 类型安全：添加了TypeScript接口
✅ 性能：用React.memo包裹

核心功能

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

工具	能力	级别	输出
`remediate_code`	自动安全、性能和质量修复	专家	生产就绪代码
`refactor_component`	高级组件现代化和优化	高级	重构的组件及测试
安全修复	硬编码的秘密 → 环境变量	企业	安全代码模式
性能修复	内存泄漏、FlatList优化、样式表	专家	优化的组件
类型安全	自动生成TypeScript接口	专业	类型安全代码

🧪 高级测试套件

功能	描述	框架
自动测试生成	组件的行业标准测试套件	Jest, Testing Library
覆盖率分析	详细的报告和改进策略	Jest Coverage, LCOV
策略评估	测试方法分析和建议	单元、集成、E2E
框架集成	多平台测试支持	Detox, Maestro, jest-axe

🔍 综合分析工具

分析类型	能力	输出
安全审计	漏洞检测与自动修复	风险优先级报告 + 修复
性能分析	内存、渲染、捆绑优化 + 修复	可操作建议 + 代码
代码质量	复杂度分析与重构实现	可维护性指标 + 修复
可访问性	WCAG合规性与自动改进	合规报告 + 代码

📦 依赖管理

自动包审计 - 安全漏洞和过时的依赖项
智能升级 - 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"

实际场景

场景	命令	结果
🔧 自动代码修复	`"修复我组件中的所有安全和性能问题，使用专家级解决方案"`	生产就绪修复代码
🏗️ 组件现代化	`"将我的旧组件现代化为现代React Native模式，并附带测试"`	现代化的组件 + 测试套件
🛡️ 安全强化	`"自动修复硬编码的秘密和安全漏洞"`	使用环境变量的安全代码
⚡ 性能优化	`"自动修复内存泄漏并优化FlatList性能"`	有清理的优化代码
📝 类型安全增强	`"自动添加TypeScript接口并提高类型安全性"`	有接口的类型安全代码
预部署安全检查	`"扫描我的React Native项目中的安全漏洞"`	安全报告 + 自动修复
性能瓶颈分析	`"分析我的应用程序中的性能瓶颈和内存泄漏"`	优化路线图 + 修复
代码质量审查	`"审查我的代码库中的重构机会"`	质量改进 + 实现
可访问性合规性	`"检查我的应用程序中的可访问性问题并自动修复它们"`	WCAG合规性 + 代码修复
组件测试生成	`"为我的LoginScreen组件生成综合测试"`	完整的测试套件
测试策略优化	`"分析我的当前测试策略并提出改进建议"`	测试路线图

Claude Desktop 集成

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": ["/绝对路径/to/React-Native-MCP/build/index.js"],
      "env": {}
    }
  }
}

配置路径：

Windows: C:\Users\{用户名}\Desktop\React-Native-MCP\build\index.js
macOS/Linux: /Users/{用户名}/Desktop/React-Native-MCP/build/index.js

开发与维护

本地开发

# 开发模式，热重载
npm run dev

# 生产构建
npm run build

# 生产服务器
npm start

持续集成

该项目实现了企业级CI/CD：

✅ 自动版本管理 - 语义化版本控制与自动递增
✅ 持续部署 - 合并后自动发布到npm
✅ 发布自动化 - GitHub发行版，带有详尽的变更日志
✅ 质量门控 - 部署前的构建验证和测试

更新管理

# 查看当前版本
npm list -g @mrnitro360/react-native-mcp-guide

# 更新到最新版本
npm update -g @mrnitro360/react-native-mcp-guide

# 重新配置Claude CLI
claude mcp remove react-native-guide
claude m_ cp 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接口和提取样式表
🎯 可访问性：WCAG合规性与自动修复

🎯 修复能力：

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

v1.0.5 - 上一版本

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

支持与社区

资源

📦 NPM 包 - 官方包仓库
🐙 GitHub 仓库 - 源码和开发
🐛 问题追踪器 - Bug报告和功能请求
📖 MCP 文档 - 模型上下文协议规范
⚛️ React Native 文档 - 官方React Native文档

贡献

我们欢迎来自React Native社区的贡献。请参阅我们的贡献指南，了解开发标准和提交流程。