STARWARCLOUD STARWAR.AI
返回市场
React原生MCP服务器

React原生MCP服务器

作者：MrNitro36017 星标更新：2025-08-13
安装使用来源：spider==github.com

项目介绍

React Native MCP Server

<div align="center">

npm 版本 许可证：MIT 模型上下文协议 自动部署 TypeScript React Native

专业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 - 上一版本

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

支持与社区

资源

贡献

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