healthapp/TODOS/01-环境搭建/01-APP-ReactNative环境搭建.md

01-APP React Native 环境搭建

目标

搭建 React Native 开发环境，确保可以正常创建和运行项目。

---

环境要求

工具	版本要求	说明
Node.js	18+	JavaScript 运行环境
npm/yarn	最新版	包管理器
JDK	17+	Android 编译需要
Android Studio	最新版	Android 开发环境
Xcode	14+	iOS 开发环境（仅 macOS）

---

实施步骤

步骤 1：安装 Node.js

# 下载并安装 Node.js 18+
# https://nodejs.org/

# 验证安装
node -v
npm -v

步骤 2：安装 JDK（Android 开发）

# Windows：下载 OpenJDK 17
# https://adoptium.net/

# macOS：使用 Homebrew
brew install openjdk@17

# 配置环境变量
# JAVA_HOME 指向 JDK 安装目录

步骤 3：安装 Android Studio

1. 下载 Android Studio：https://developer.android.com/studio
2. 安装时选择以下组件：
   • Android SDK
   • Android SDK Platform
   • Android Virtual Device
3. 打开 SDK Manager，安装：
   • Android 14 (API 34)
   • Android SDK Build-Tools 34
   • Android SDK Command-line Tools
   • Android Emulator
4. 配置环境变量：

   # Windows (添加到系统环境变量)
   ANDROID_HOME=C:\Users\<用户名>\AppData\Local\Android\Sdk
   
   # macOS/Linux (添加到 ~/.zshrc 或 ~/.bashrc)
   export ANDROID_HOME=$HOME/Library/Android/sdk
   export PATH=$PATH:$ANDROID_HOME/emulator
   export PATH=$PATH:$ANDROID_HOME/platform-tools
   

步骤 4：创建 Android 模拟器

1. 打开 Android Studio
2. 进入 Device Manager
3. 创建新设备：
   • 选择 Pixel 6
   • 选择 API 34 系统镜像
   • 完成创建

步骤 5：安装 Xcode（仅 macOS）

# 从 App Store 安装 Xcode

# 安装命令行工具
xcode-select --install

# 安装 CocoaPods
sudo gem install cocoapods

步骤 6：验证环境

# 创建测试项目
npx react-native init TestApp --template react-native-template-typescript

# 进入项目
cd TestApp

# 启动 Metro
npm start

# 新终端运行 Android
npm run android

# 或运行 iOS (macOS)
npm run ios

---

常见问题

Android 构建失败

• 检查 ANDROID_HOME 环境变量
• 检查 JDK 版本是否为 17+
• 运行 cd android && ./gradlew clean

iOS 构建失败

• 运行 cd ios && pod install
• 检查 Xcode 版本

Metro 启动失败

• 清除缓存：npm start -- --reset-cache
• 删除 node_modules 重新安装

---

验收标准

• Node.js 18+ 已安装
• Android Studio 已安装
• Android 模拟器可正常启动
• 测试项目可在模拟器运行
• (macOS) Xcode 已安装
• (macOS) iOS 模拟器可正常运行

---

预计耗时

30-60 分钟（视网络情况）

---

下一步

完成后进入 01-环境搭建/02-Web前端Vue环境搭建.md