AI导哈

React应用脚手架工具

一个命令行工具，用于快速创建React Native移动应用或React Web应用（标准版或PWA），配置设备目标/模拟器，并同步私有GitHub仓库。

  • by nhague
  • Shell
  • 本地部署
  • 更新于
在 GitHub 查看 nhague/create-rn-app-mcp

使用说明

创建RN应用程序MCP🚀

作者 内特·黑格
版本： 2.0.0
说明： 一个命令可以构建React Native移动应用程序或React web应用程序（标准或PWA），配置设备目标/模型，并端到端同步私有GitHub存储库。

📋 目录

🎯 这个工具做什么

MCP自动化了整个项目引导工作流程：

  1. ✅ 提示 React Native与React Web 并记录下游决策。
  2. ✅ 创建项目（React Native CLI或Vite React）并安装依赖项。
  3. ✅ 可选启用 磷钨酸 web项目的行为 vite-plugin-pwa.
  4. ✅ 脚手架的本土风格 样机 适用于网络项目（手机、平板电脑或两者），包括Android平板电脑chrome、重置按钮、国家选择器和流量/审计抽屉。
  5. ✅ 在本机项目（Info.plist、AndroidManifest）中配置设备/方向支持。
  6. ✅ 初始化Git，创建 私有GitHub存储库，并推动 main.

没有MCP： 15+命令，平台特定编辑，GitHub浏览器会话。
使用MCP： 一个命令，引导提示，在几分钟内完成了仓库。

🔧 先决条件

为您计划搭建的平台安装所需的工具。

核心要求（原生+网络）

  • Node.js+npm+npx
    brew install node
  • Git
    brew install git
  • GitHub命令行界面 （已认证）
    brew install gh
gh auth login

React Native项目的附加功能

  • CocoaPods （iOS）
    sudo gem install cocoapods
  • 项目 以及命令行工具（来自App Store）
  • 安卓工作室 +SDK+JDK 11+(brew install openjdk@11)
    确保 ANDROID_HOME / ANDROID_SDK_ROOT 在您的shell配置文件中导出。

验证设置

command -v node && command -v npm && command -v npx && command -v git && command -v gh && echo "✅ Core tools installed"

# Optional platform checks
command -v pod && echo "✅ iOS tooling ready"
echo $ANDROID_HOME && command -v java && echo "✅ Android tooling ready"

📦 安装

快速安装

cd /Users/nate/Documents/development/create-rn-app-mcp
chmod +x install.sh
./install.sh

重新启动终端（或 source ~/.zshrc).

手动安装

sudo cp create-rn-app /usr/local/bin/
sudo chmod +x /usr/local/bin/create-rn-app

验证：

create-rn-app --help

🚀 用法

create-rn-app "Your Project Name"

回答交互式提示。流程首先询问您是否需要 React Native 或 React Web 项目，然后分支为特定于平台的问题：

  • React Native→ iOS/Android设置、设备焦点（手机/平板电脑/通用）、方向、可选模拟器运行。
  • React Web→ 标准与PWA、演示模式（纯网络与原生模型）、模型设备（手机/平板电脑/两者）、相关时的平板电脑方向。

GitHub存储库总是创建为 私有的 默认情况下，确保新项目的安全。

✨ 特性

  • 双平台脚手架 使用单个CLI入口点。
  • 本地模型生成器 用于web项目（Android平板电脑框架、状态栏、重置/国家按钮、流程+审计抽屉）。
  • 自动PWA接线 使用manifest+服务工作器配置。
  • 设备/定向执行 对于本机构建（Info.plist、AndroidManifest）。
  • 零接触Git/GitHub：init、commit和私有仓库创建，使用push to main.
  • 防滚安全网：失败时，部分创建的项目和GitHub仓库将被删除。

🔍 配置详情

React原生路径

  • 设备类型 → 写入 UIDeviceFamily （iOS）和 <supports-screens> （安卓）。
  • 定向 → 更新 UISupportedInterfaceOrientations （iOS）和 android:screenOrientation （安卓）。
  • 初始试运行 → 可选启动iOS模拟器或Android模拟器。

React Web路径

  • 标准与PWA → 生成纯Vite React应用程序或安装 vite-plugin-pwa 并覆盖 vite.config.js 使用合理的默认值（记得在下面添加自己的图标 public/).
  • 实体模型模式 →
    • 电话：固定390×844视口。
    • 平板电脑（纵向/横向）：安卓平板电脑框架、引导流抽屉、审计抽屉、重置+国家选择器、状态栏和从Nate的Foodchoo演示中复制的紫色渐变舞台。
    • 两者都有：在手机和平板电脑断点之间切换的响应式shell。
  • 普通网络 → 叶香草Vite结构；你可以在上面叠加自己的UI。

🛠️ 故障排除

  • 未找到命令 → 确保 /usr/local/bin 在...里 $PATH，重新运行安装。
  • GitHub CLI身份验证错误 → Run gh auth login （脚本将停止，直到通过身份验证）。
  • 缺少平台工具 → 根据先决条件安装pods/JDK/Android Studio；提示包括警告摘要。
  • 缺少 PWA 图标 → 提供 public/pwa-192x192.png, public/pwa-512x512.png，以及（可选）装运前的可密封变体。

🧹 卸载

sudo rm /usr/local/bin/create-rn-app

如果将支持模板帮助程序复制到其他地方，请同时删除这些帮助程序。

快乐建筑！ 🎉

相关 MCP