1. React Native 环境搭建概述

React Native 作为 Facebook 开源的跨平台移动应用开发框架，允许开发者使用 JavaScript 和 React 来构建原生移动应用。与传统的 Hybrid 应用不同，React Native 通过桥接技术将 JavaScript 核心与原生平台组件连接，实现了接近原生应用的性能和体验。

在开始 React Native 开发之前，环境搭建是最基础也是最重要的第一步。一个正确配置的开发环境能够避免后续开发中 80% 的奇怪问题。根据我的经验，大多数初学者遇到的问题都源于环境配置不当，因此本文将详细讲解 React Native 环境搭建的完整流程。

2. 基础依赖安装

2.1 Node.js 安装与配置

React Native 需要 Node.js 作为 JavaScript 运行时环境。目前 React Native 0.73 及以上版本要求 Node.js 18 或更高版本。

安装步骤：

1. 访问 Node.js 官网下载 LTS 版本（推荐 18.x）
2. 运行安装程序，保持默认配置即可
3. 安装完成后，在命令行验证安装：

   node -v npm -v

国内用户特别注意事项：由于 npm 官方源在国内访问速度较慢，建议切换为淘宝镜像源：

npm config set registry https://registry.npmmirror.com

警告：不要使用 cnpm！cnpm 安装的模块路径结构与 npm 不同，可能导致 React Native 打包工具无法正确识别模块。

2.2 JDK 安装与配置

React Native Android 开发需要 Java Development Kit (JDK)。从 React Native 0.73 开始，要求 JDK 17 版本。

安装选项：

• 对于 macOS 用户，推荐使用 Homebrew 安装 Zulu OpenJDK：

  brew tap homebrew/cask-versions brew install --cask zulu17

• Windows/Linux 用户可以从 Azul Zulu 或 Oracle 官网下载 JDK 17

安装后验证：

javac -version

2.3 Yarn 安装（可选但推荐）

Yarn 是 Facebook 提供的 npm 替代品，具有更快的依赖下载速度和更可靠的依赖锁定机制。

安装命令：

npm install -g yarn

使用 Yarn 后，可以用yarn替代npm install，用yarn add替代npm install <package>

3. Android 开发环境配置

3.1 Android Studio 安装

Android Studio 是官方推荐的 Android 开发 IDE，它包含了开发 React Native 应用所需的全部工具。

安装步骤：

1. 从 Android 开发者官网下载 Android Studio
2. 运行安装程序，在组件选择界面确保勾选：
   • Android SDK
   • Android SDK Platform
   • Android Virtual Device
3. 完成安装后启动 Android Studio

3.2 Android SDK 配置

React Native 需要特定版本的 Android SDK 和构建工具。目前推荐配置如下：

1. 打开 Android Studio 的 SDK Manager（可通过欢迎界面或 Preferences 进入）
2. 在 "SDK Platforms" 选项卡中：
   • 勾选 "Show Package Details"
   • 选择 Android 13 (Tiramisu) 并确保勾选：
     • Android SDK Platform 33
     • 对应 CPU 架构的系统镜像（Intel x86_64 或 ARM v8a）
3. 在 "SDK Tools" 选项卡中：
   • 勾选 "Show Package Details"
   • 确保安装 Android SDK Build-Tools 33.0.0
   • 安装 NDK（Side by side）最新稳定版

3.3 环境变量配置

React Native 需要通过环境变量定位 Android SDK 的位置。

macOS/Linux：编辑 shell 配置文件（~/.zshrc 或 ~/.bash_profile）：

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

Windows：

1. 创建 ANDROID_HOME 系统变量，值为 SDK 路径（通常为C:\Users\你的用户名\AppData\Local\Android\Sdk）
2. 将以下路径添加到 Path 变量：
   • %ANDROID_HOME%\platform-tools
   • %ANDROID_HOME%\tools
   • %ANDROID_HOME%\tools\bin
   • %ANDROID_HOME%\emulator

配置完成后，重启终端或命令行窗口使变更生效。

4. 创建第一个 React Native 项目

4.1 项目初始化

React Native 提供了命令行工具来初始化新项目。首先确保卸载旧版本的 CLI 工具（如果之前安装过）：

npm uninstall -g react-native-cli @react-native-community/cli

然后使用 npx 创建新项目：

npx react-native@latest init AwesomeProject

项目命名注意事项：

• 不要使用 JavaScript 保留字（如 class、native 等）
• 不要使用与核心模块相同的名称（如 react、react-native 等）
• 避免使用空格和特殊字符

4.2 项目结构解析

初始化完成后，项目目录结构如下：

AwesomeProject/ ├── android/ # Android 原生代码 ├── ios/ # iOS 原生代码 ├── node_modules/ # 项目依赖 ├── App.js # 应用入口文件 ├── package.json # 项目配置和依赖声明 └── ... # 其他配置文件

5. 运行 React Native 应用

5.1 启动 Metro 打包器

Metro 是 React Native 的 JavaScript 打包工具，负责实时编译和打包 JavaScript 代码。在新终端中运行：

cd AwesomeProject yarn start # 或 npm start

这将启动 Metro 服务并显示一个二维码，可用于真机调试。

5.2 运行 Android 应用

确保已启动 Android 模拟器或连接了真机，然后在新终端中运行：

yarn android # 或 npm run android

首次运行会下载大量 Gradle 依赖，可能需要较长时间。如果遇到网络问题，可以考虑配置 Gradle 镜像源。

5.3 常见问题解决

问题1：Gradle 构建失败

• 解决方案：检查网络连接，或配置阿里云镜像源
• 编辑项目目录下的android/build.gradle：

  buildscript { repositories { maven { url 'https://maven.aliyun.com/repository/google' } maven { url 'https://maven.aliyun.com/repository/jcenter' } maven { url 'https://maven.aliyun.com/repository/public' } google() jcenter() } }

问题2：模拟器无法启动

• 解决方案：确保已启用虚拟化技术（Intel VT-x 或 AMD-V）
• 在 BIOS 中启用相关选项

问题3：红屏错误

• 解决方案：检查 Metro 服务是否正常运行
• 在设备上摇动调出开发者菜单，选择 "Reload"

6. 开发环境优化建议

6.1 编辑器配置

推荐使用 Visual Studio Code 进行 React Native 开发，安装以下插件提升开发体验：

• React Native Tools
• ES7+ React/Redux/React-Native snippets
• Prettier - Code formatter
• ESLint

6.2 调试工具

• React Developer Tools：调试 React 组件树
• Flipper：React Native 官方调试工具，支持日志查看、网络监控等
• Chrome 开发者工具：调试 JavaScript 代码

6.3 性能优化

• 启用 Hermes 引擎（React Native 的高性能 JavaScript 引擎） 在android/app/build.gradle中设置：

  project.ext.react = [ enableHermes: true ]

• 使用 RAM 模式（针对低内存设备） 在android/app/src/main/AndroidManifest.xml中添加：

  <application android:largeHeap="true" ...>

7. 多平台开发注意事项

7.1 iOS 开发环境（macOS 用户）

如果需要开发 iOS 应用，还需要配置：

• Xcode 14.1 或更高版本
• CocoaPods 1.10 或更高版本
• 安装命令：

  sudo gem install cocoapods

7.2 Windows/Linux 用户

目前 React Native 对 iOS 开发的支持仅限于 macOS 系统。Windows/Linux 用户可以通过以下方式开发 iOS 应用：

• 使用远程构建服务
• 使用虚拟机运行 macOS
• 专注于 Android 开发

8. 项目维护与升级

8.1 依赖管理

定期更新项目依赖：

yarn upgrade-interactive # 或 npm outdated npm update

8.2 React Native 版本升级

使用官方升级助手：

npx react-native upgrade

对于大版本升级，建议参考官方升级指南，逐步执行升级步骤。

8.3 常见维护任务

• 清理构建缓存：

  cd android && ./gradlew clean

• 重置 Metro 缓存：

  yarn start --reset-cache

• 重新安装 node_modules：

  rm -rf node_modules && yarn install

经过以上步骤，你应该已经成功搭建了 React Native 开发环境并运行了第一个应用。如果在过程中遇到任何问题，React Native 社区和官方文档都是很好的资源。记住，环境搭建虽然繁琐，但一次正确的配置可以避免后续开发中的许多问题。