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 社區的貢獻。請查看我們的 貢獻指南 以瞭解開發標準和提交流程。