React Native环境搭建 #

概述 #

搭建 React Native 开发环境需要安装多个工具和依赖。本指南将详细介绍在不同操作系统上配置开发环境的步骤。

前置要求 #

硬件要求 #

要求 最低配置 推荐配置
内存 8GB 16GB+
存储 20GB 可用空间 50GB+ SSD
CPU 双核 四核+

操作系统要求 #

  • iOS 开发：必须使用 macOS
  • Android 开发：macOS、Windows 或 Linux

安装步骤 #

1. 安装 Node.js #

React Native 需要 Node.js 18 或更高版本。

macOS (使用 Homebrew) #

bash 
brew install node

Windows (使用 Chocolatey) #

bash 
choco install nodejs

验证安装 #

bash 
node --version
npm --version

2. 安装包管理器 #

推荐使用 npm 或 yarn。yarn 在某些场景下更快：

bash 
npm install -g yarn

3. 安装 Watchman (macOS) #

Watchman 是 Facebook 开发的文件监视工具，可以提高开发效率：

bash 
brew install watchman

4. 安装 React Native CLI #

bash 
npm install -g react-native-cli

或者使用 npx 直接运行（推荐）：

bash 
npx react-native@latest init MyProject

iOS 开发环境 #

安装 Xcode #

  1. 从 Mac App Store 下载并安装 Xcode
  2. 安装 Xcode Command Line Tools：
bash 
xcode-select --install

配置 Xcode #

  1. 打开 Xcode，接受许可协议
  2. 进入 Preferences → Locations，选择 Command Line Tools
  3. 安装 iOS 模拟器

安装 CocoaPods #

CocoaPods 是 iOS 的依赖管理工具：

bash 
sudo gem install cocoapods

或者使用 Homebrew：

bash 
brew install cocoapods

验证 iOS 环境 #

bash 
xcodebuild -version
pod --version

Android 开发环境 #

安装 JDK #

安装 JDK 17（推荐）或 JDK 11：

macOS #

bash 
brew install openjdk@17

Windows #

下载并安装 Oracle JDK 或 OpenJDK。

验证安装 #

bash 
java -version
javac -version

安装 Android Studio #

  1. 下载 Android Studio
  2. 安装并启动 Android Studio
  3. 完成初始设置向导

配置 Android SDK #

在 Android Studio 中：

  1. 打开 Preferences → Appearance & Behavior → System Settings → Android SDK
  2. 安装以下组件：
    • Android SDK Platform 34
    • Android SDK Build-Tools 34
    • Android SDK Command-line Tools
    • Android Emulator
    • Android SDK Platform-Tools

配置环境变量 #

macOS/Linux (~/.zshrc 或 ~/.bash_profile) #

bash 
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin

Windows (系统环境变量) #

text 
ANDROID_HOME: %LOCALAPPDATA%\Android\Sdk
Path: 添加 %ANDROID_HOME%\platform-tools
Path: 添加 %ANDROID_HOME%\emulator

创建 Android 模拟器 #

  1. 打开 Android Studio
  2. 进入 Tools → Device Manager
  3. 点击 “Create Device”
  4. 选择设备型号（推荐 Pixel 5）
  5. 选择系统镜像（推荐 API 34）
  6. 完成创建

验证 Android 环境 #

bash 
adb --version
android --version

开发工具推荐 #

代码编辑器 #

VS Code（推荐） #

  1. 安装 Visual Studio Code
  2. 安装推荐扩展：
    • React Native Tools
    • ES7+ React/Redux/React-Native snippets
    • Prettier - Code formatter
    • ESLint

WebStorm #

JetBrains 出品的 IDE，内置 React Native 支持。

调试工具 #

React Native Debugger #

独立的调试工具，集成了 React DevTools 和 Redux DevTools：

bash 
brew install --cask react-native-debugger

Flipper #

Facebook 出品的移动应用调试平台：

bash 
brew install --cask flipper

创建第一个项目 #

使用 React Native CLI #

bash 
npx react-native@latest init MyFirstApp

使用 TypeScript 模板 #

bash 
npx react-native@latest init MyFirstApp --template react-native-template-typescript

项目结构 #

text 
MyFirstApp/
├── android/           # Android 原生代码
├── ios/               # iOS 原生代码
├── node_modules/      # 依赖包
├── src/               # 源代码（建议创建）
│   ├── components/
│   ├── screens/
│   └── App.tsx
├── App.tsx            # 入口文件
├── index.js           # 注册入口
├── package.json       # 项目配置
└── tsconfig.json      # TypeScript 配置

运行项目 #

iOS #

bash 
cd MyFirstApp
npx react-native run-ios

指定模拟器：

bash 
npx react-native run-ios --simulator="iPhone 15 Pro"

Android #

bash 
cd MyFirstApp
npx react-native run-android

指定设备：

bash 
npx react-native run-android --deviceId=emulator-5554

常见问题解决 #

iOS 常见问题 #

Pod install 失败 #

bash 
cd ios
pod deintegrate
pod install

Xcode 构建失败 #

  1. 清理构建缓存：Product → Clean Build Folder
  2. 删除 DerivedData：~/Library/Developer/Xcode/DerivedData
  3. 重新安装 pods

Android 常见问题 #

SDK 位置未找到 #

确保 ANDROID_HOME 环境变量正确设置。

模拟器无法启动 #

  1. 检查 HAXM 安装（Intel CPU）
  2. 检查 Hypervisor（AMD CPU）
  3. 增加模拟器内存

Gradle 构建失败 #

bash 
cd android
./gradlew clean
cd ..
npx react-native run-android

通用问题 #

Metro bundler 问题 #

清理缓存：

bash 
npx react-native start --reset-cache

Node modules 问题 #

重新安装依赖：

bash 
rm -rf node_modules
rm package-lock.json
npm install

环境验证清单 #

完成以下检查确保环境配置正确：

  • [ ] Node.js 已安装（v18+）
  • [ ] npm/yarn 已安装
  • [ ] React Native CLI 可用
  • [ ] Xcode 已安装（iOS 开发）
  • [ ] CocoaPods 已安装（iOS 开发）
  • [ ] Android Studio 已安装
  • [ ] Android SDK 已配置
  • [ ] Android 模拟器可运行
  • [ ] 项目可以成功构建运行

总结 #

搭建 React Native 开发环境需要安装多个工具，但只需要配置一次。确保每个步骤都正确完成后，就可以开始开发了。

接下来，让我们创建并运行第一个 React Native 应用。

继续学习 第一个应用，开始你的 React Native 开发之旅。

最后更新：2026-03-28