React Native Android 环境搭建指南

本文将详细介绍如何在不同操作系统上搭建React Native Android开发环境,包括现代的Expo和React Native CLI两种方式。

1. 环境准备

1.1 系统要求

  • Windows:Windows 10或更高版本
  • macOS:macOS 10.14或更高版本
  • Linux:Ubuntu 18.04或更高版本

1.2 核心依赖

通用依赖

  • Node.js:16.0或更高版本
  • npm:8.0或更高版本
  • Git:最新版本

Android特定依赖

  • Java Development Kit (JDK):JDK 11(推荐)
  • Android Studio:最新版本
  • Android SDK:Android 13 (API level 33)或更高
  • Android SDK Build-Tools:33.0.0或更高
  • Android SDK Command-line Tools:最新版本

2. 安装步骤

2.1 方法一:使用Expo(推荐初学者)

Expo是一个开源平台,使React Native开发变得更加简单,无需配置复杂的原生开发环境。

1
2
3
4
5
6
7
8
9
10
11
12
# 安装Expo CLI
npm install -g expo-cli

# 创建新的Expo项目
expo init my-project
cd my-project

# 启动开发服务器
expo start

# 在Android设备或模拟器上运行
expo run:android

2.2 方法二:使用React Native CLI

2.2.1 安装Node.js和npm

  • Windows:从Node.js官网下载并安装
  • macOS:使用Homebrew brew install node
  • Linux:使用包管理器 sudo apt install nodejs npm

2.2.2 安装Java JDK

  • Windows:从Oracle官网下载并安装JDK 11
  • macOS:使用Homebrew brew install openjdk@11
  • Linux:使用包管理器 sudo apt install openjdk-11-jdk

2.2.3 安装Android Studio

  1. Android Studio官网下载并安装
  2. 启动Android Studio,打开SDK Manager
  3. 安装以下组件:
    • Android SDK Platform 33
    • Android SDK Build-Tools 33.0.0
    • Android SDK Command-line Tools (latest)
    • Android Emulator
    • Intel x86 Emulator Accelerator (HAXM installer)(Windows/macOS)

2.2.4 配置环境变量

Windows

  1. 右键”此电脑” → “属性” → “高级系统设置” → “环境变量”
  2. 在系统变量中添加:
    • ANDROID_HOMEC:\Users\YourUsername\AppData\Local\Android\Sdk
  3. 在Path变量中添加:
    • %ANDROID_HOME%\platform-tools
    • %ANDROID_HOME%\tools
    • %ANDROID_HOME%\tools\bin

macOS/Linux
编辑~/.bashrc~/.zshrc文件,添加:

1
2
3
export ANDROID_HOME=$HOME/Library/Android/sdk  # macOS
export ANDROID_HOME=$HOME/Android/Sdk # Linux
export PATH=$PATH:$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools:$ANDROID_HOME/tools/bin

2.2.5 创建React Native项目

1
2
3
4
5
6
7
8
9
10
11
12
# 安装React Native CLI
npm install -g react-native-cli

# 创建新项目
npx react-native init MyProject
cd MyProject

# 启动开发服务器
npx react-native start

# 在Android设备或模拟器上运行
npx react-native run-android

3. 常见问题与解决方案

3.1 AAPT错误

问题

1
java.io.IOException: Cannot run program "/usr/local/android-sdk/build-tools/23.0.1/aapt": error=2, 没有那个文件或目录

解决方案

  • Linux:安装32位依赖
    1
    sudo apt-get install lib32stdc++6 lib32z1
  • Windows/macOS:确保Android SDK Build-Tools已正确安装

3.2 模拟器启动失败

问题:模拟器无法启动或运行缓慢

解决方案

  • 启用硬件加速:在BIOS中启用VT-x/AMD-V
  • 为模拟器分配足够的内存(至少4GB)
  • 考虑使用Genymotion作为替代模拟器

3.3 Gradle构建错误

问题:Gradle构建失败,出现依赖冲突

解决方案

  • 清理Gradle缓存:cd android && ./gradlew clean
  • 更新Gradle版本:修改android/gradle/wrapper/gradle-wrapper.properties
  • 检查网络连接,确保依赖可以下载

3.4 SDK路径错误

问题:React Native无法找到Android SDK

解决方案

  • 确保ANDROID_HOME环境变量正确设置
  • 验证SDK路径是否存在且包含必要的组件

4. 设备配置

4.1 使用物理设备

  1. 启用设备的开发者选项
  2. 启用USB调试
  3. 连接设备到电脑
  4. 运行 adb devices 确认设备已被识别
  5. 执行 npx react-native run-android

4.2 使用模拟器

使用Android Studio模拟器

  1. 启动Android Studio
  2. 打开AVD Manager
  3. 创建新的虚拟设备
  4. 启动模拟器
  5. 执行 npx react-native run-android

使用Genymotion

  1. Genymotion官网下载并安装
  2. 创建新的虚拟设备
  3. 启动模拟器
  4. 执行 npx react-native run-android

5. 开发工具推荐

5.1 代码编辑器

  • Visual Studio Code:推荐,带有React Native扩展
  • WebStorm:功能强大的IDE,对React Native有良好支持

5.2 调试工具

  • React Native Debugger:独立的调试工具
  • Flipper:Facebook开发的调试平台
  • Chrome DevTools:通过Remote JS Debugging使用

6. 性能优化

6.1 开发模式优化

  • 使用--mode=development构建开发版本
  • 启用Fast Refresh快速查看更改
  • 使用热重载提高开发效率

6.2 生产构建

1
2
3
4
5
# 生成生产APK
cd android && ./gradlew assembleRelease

# 生成App Bundle (推荐)
cd android && ./gradlew bundleRelease

7. 版本管理

7.1 依赖更新

1
2
3
4
5
6
7
8
# 更新React Native
npm update react-native

# 更新Expo
npx expo update

# 更新所有依赖
npm update

7.2 版本兼容性

React Native版本 推荐Node.js版本 推荐JDK版本 推荐Android SDK版本
0.73+ 18.0+ JDK 11 Android 13 (API 33)
0.70-0.72 16.0+ JDK 11 Android 13 (API 33)
0.68-0.69 14.0+ JDK 11 Android 12 (API 31)

8. 最佳实践

  1. 使用Expo:对于初学者,Expo提供了更简单的开发体验
  2. 保持依赖更新:定期更新React Native和相关依赖
  3. 使用TypeScript:提高代码质量和可维护性
  4. 模块化代码:将代码组织成可重用的组件
  5. 性能监控:使用Flipper等工具监控应用性能
  6. 测试:编写单元测试和集成测试
  7. 持续集成:设置CI/CD流程自动化构建和测试

9. 参考资料