AI导哈

React Native开发辅助工具

一个为React Native和Expo开发提供自动化代码生成和优化的MCP服务器工具，涵盖Expo Router、NativeWind、Zustand等技术栈。

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

使用说明

react本地博览会mcp

MCP服务器，用于使用Claude Code进行React Native+Expo开发。

为Claude提供了有关Expo Router、NativeWind、Zustand+MMKV、Axios、TanStack Query、EAS Build、性能优化和TypeScript模式的深入知识，因此它在您编码时会自动调用正确的工具。

有两种方法可以使用它

选项A-MCP服务器（推荐）

Claude在开发过程中自动调用这些工具。无需复制粘贴。

git clone https://github.com/zahargusyatin/react-native-expo-mcp.git
cd react-native-expo-mcp
npm install && npm run build
claude mcp add --global react-native-expo -- node /path/to/react-native-expo-mcp/dist/index.js

连接后，当您要求Claude创建组件、屏幕、商店、API挂钩等时，Claude会自动调用正确的工具。

选项B——直接读取源文档

如果你不想运行MCP服务器，源材料在 docs/。这些是MCP内容所基于的原始参考文档——您可以将它们粘贴到任何AI聊天中或自己阅读。

文件 内容
docs/best-practices.md 架构、逻辑/UI分离、组件、状态、API、样式、导航
docs/setup-tutorial.md 逐步项目设置（工具→ EAS → CI/CD）
docs/callstack-optimization.md 性能深度挖掘：列表、内存、并发React、Reanimated、捆绑包分析

工具（共13个）

模式工具——Claude在编码时自动调用这些工具

工具 何时调用。..
get-component-patterns 创建组件、按钮、卡、列表项
get-screen-architecture 创建新屏幕或路线
get-navigation-patterns 使用路由、深度链接、身份验证保护
get-state-patterns 创建Zustand商店或与全球政府合作
get-api-patterns 创建API服务或数据获取挂钩
get-styling-patterns 使用NativeWind设计组件
get-performance-patterns 优化列表、图像、捆绑包、动画
get-project-structure 决定在何处放置新文件
get-typescript-patterns 书写类型或接口
get-memory-optimization 调试内存泄漏或性能问题

设置工具——创建项目时使用一次

工具 目的
setup-new-project 从头开始创建新世博项目的分步指南
generate-project-files 生成启动文件（布局、存储、API客户端、屏幕、配置）
generate-claude-md 生成 CLAUDE.md 包含项目规则和MCP工具使用说明

提示

init-mobile-project --交互式向导，询问您的项目并调用正确的工具。

自动工具调用的工作原理

添加时 generate-claude-md 输出到您的项目 CLAUDE.md，克劳德知道自动调用工具：

You: "Create a product card component"
Claude: calls get-component-patterns → reads Pressable, expo-image, React.memo patterns → writes correct code

You: "Add a catalog screen"
Claude: calls get-screen-architecture → reads Logic/UI separation rules → creates Route + ScreenUI files

You: "The list is laggy"
Claude: calls get-performance-patterns → reads LegendList, FlashList, getItemLayout → optimizes

技术栈已覆盖

  • 博览会 （管理工作流）+ 世博路由器 （基于文件的路由）
  • TypeScript 严格模式+路径别名
  • NativeWind v4 （React Native的顺风CSS）
  • 状态 + MMKV （状态+持久性）
  • 阿西奥斯 + TanStack查询v5 （API+服务器状态）
  • EAS构建 + OTA更新 + GitHub操作
  • 反应本土复活, 世博会形象, 传奇/闪光名单
  • React编译器（React 19+）、并发React、内存分析

许可证

麻省理工学院

相关 MCP