AI导哈

React Native MCP服务器

React Native MCP服务器是一个用于React Native应用自动化和监控的纯JavaScript运行时工具，支持状态检查、渲染分析和网络模拟等多种功能。

  • by ohah
  • TypeScript
  • 本地部署
  • 7 星标
  • 更新于
在 GitHub 查看 ohah/react-native-mcp

使用说明

React原生MCP服务器

韩语文档 | 文档网站

用于React Native应用程序自动化和监控的MCP（模型上下文协议）服务器。适用于Cursor、Claude Desktop、Claude Code、GitHub Copilot、Windsurf和任何兼容MCP的客户端。

这有什么不同

  • React Fiber树访问 --通过实际的光纤树查询和检查组件，而不是屏幕截图或可访问性标签
  • 状态检查 --实时读取任何组件的React钩子（useState、Zustand等）
  • 渲染分析 --在没有React DevTools的情况下跟踪挂载、重新渲染和不必要的渲染
  • 网络模拟 --在运行时拦截XHR/fetch并注入模拟响应
  • 49个MCP工具 --在12个类别中点击、滑动、截图、断言、评估、清除（目标）等
  • 零本机模块 --纯JS运行时+主机CLI工具（adb/idb）。无链接，无本机代码
  • YAML E2E测试 --用YAML编写场景，在没有人工智能的情况下在CI中运行

文档

指南 说明
快速开始 5分钟设置指南
世博会指南 世博会专用设置（开发客户端、世博会Go、世博会路由器）
工具参考 所有49个带有参数和示例的工具
烹饪书 实际使用场景
建筑 引擎盖下的工作原理
故障排除 连接问题和修复
VS代码扩展 侧边栏中的DevTools+组件树
E2E测试 YAML场景测试

快速入门（CLI初始化）

在项目中设置React Native MCP的最快方法：

npx -y @ohah/react-native-mcp-server init

它做什么

init命令执行以下步骤：

第一步——项目检测 （自动）

读取 package.json、锁定文件和配置文件以检测：

  • React原生版本(dependencies.react-native)
  • 世博会(dependencies.expo, app.json, app.config.ts)
  • Babel配置位置(babel.config.js, .babelrc等等）
  • 包管理器(bun.lock → bun, yarn.lock → yarn, pnpm-lock.yaml → pnpm，否则为npm）
 Detecting project...
  ✓ React Native 0.83.1
  ✓ Expo detected (expo@~52.0.0)
  ✓ Package manager: bun

步骤2-MCP客户端选择 （交互式提示）

询问您使用哪个MCP客户端。这决定了服务器配置文件的创建位置。

? Which MCP client do you use?
  1. Cursor
  2. Claude Code (CLI)
  3. Claude Desktop
  4. Windsurf
  5. Antigravity
> 1
客户端 配置位置
光标 {project}/.cursor/mcp.json
克劳德代码 claude mcp add CLI命令
克劳德桌面 ~/Library/Application Support/Claude/claude_desktop_config.json （macOS）
风帆冲浪 ~/.codeium/windsurf/mcp_config.json
反重力 ~/.gemini/antigravity/mcp_config.json

步骤3——应用更改 （自动）

  1. babel.config.js --附录 @ohah/react-native-mcp-server/babel-preset 到 presets 阵列。如果已经存在，则跳过。
  2. MCP配置 --创建服务器条目或将其合并到客户端配置文件中。现有设置将保留。
  3. 微笑。 --附录 /results/ 如果尚未出现。

步骤4--运行您的应用程序并开始使用MCP工具

# Bare RN
npx react-native start

# Expo
npx expo start

选项

# Non-interactive mode — skip prompts, use Cursor as default client
npx -y @ohah/react-native-mcp-server init -y

# Specify client explicitly
npx -y @ohah/react-native-mcp-server init --client cursor
npx -y @ohah/react-native-mcp-server init --client claude-code

# Help
npx -y @ohah/react-native-mcp-server init --help

跑步 init 多次是安全的——每一步都会检查是否已经应用了更改。

Monorepo： 跑 init 从repo根目录。它补充道 @ohah/react-native-mcp-server 到检测到的应用程序包 devDependencies 并从root运行install。看 CLI初始化 对于以下选项 --no-install.

用法

光标

增添 .cursor/mcp.json:

{
  "mcpServers": {
    "react-native-mcp": {
      "command": "npx",
      "args": ["-y", "@ohah/react-native-mcp-server"]
    }
  }
}

克劳德桌面/克劳德代码

# Claude Code CLI (recommended)
claude mcp add --transport stdio react-native-mcp -- npx -y @ohah/react-native-mcp-server

或编辑 ~/Library/Application Support/Claude/claude_desktop_config.json 具有相同的JSON结构。

GitHub Copilot命令行界面

跑 /mcp add react-native-mcp 在Copilot CLI中，或编辑 ~/.copilot/mcp-config.json.

VS代码扩展（DevTools）

安装 React原生MCP工具 来自市场，或使用VS代码： Ctrl+Shift+X （扩展）→ 搜索 React原生MCP工具 → 安装。在侧边栏中为您提供控制台、网络、状态、渲染和组件树。看 VS代码扩展 用于本地.vsix安装。

有关详细的客户端设置，请参阅 光标/克劳德/副驾驶.

必需：本机工具（idb/adb）

MCP服务器使用 互联网数据库 （iOS）和 安卓调试桥 （Android）用于原生触摸注入和屏幕截图。

# Android
brew install --cask android-platform-tools  # or install Android Studio
adb devices  # verify

# iOS Simulator
brew tap facebook/fb && brew install idb-companion
pip3 install fb-idb
idb list-targets  # verify

idb仅适用于macOS，仅适用于模拟器。看 idb安装指南 了解详情。

建筑

React Native App (iOS/Android)
  ↓ (WebSocket)
  └─ Runtime (auto-injected via Babel preset)
       ↓
     MCP Server (developer's machine, port 12300)
       ↓ (stdio/MCP protocol)
     Cursor / Claude Desktop / Copilot CLI

看 建筑 对于完整的设计。

发展

  • 工具: 布置 （参见 .mise.toml)，oxlint/oxfmt用于棉绒/格式化
  • 脚本:
    • bun run build -构建服务器
    • bun run mcp -运行MCP服务器
    • bun run dev -观看模式
    • bun run test -运行测试
    • bun run test:mcp -生成服务器，调用 evaluate_script 通过stdio

许可证

MIT© 哈哈

相关 MCP