React-native 环境搭建
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 | # 安装Expo CLI |
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
- 从Android Studio官网下载并安装
- 启动Android Studio,打开SDK Manager
- 安装以下组件:
- 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:
- 右键”此电脑” → “属性” → “高级系统设置” → “环境变量”
- 在系统变量中添加:
ANDROID_HOME:C:\Users\YourUsername\AppData\Local\Android\Sdk
- 在Path变量中添加:
%ANDROID_HOME%\platform-tools%ANDROID_HOME%\tools%ANDROID_HOME%\tools\bin
macOS/Linux:
编辑~/.bashrc或~/.zshrc文件,添加:
1 | export ANDROID_HOME=$HOME/Library/Android/sdk # macOS |
2.2.5 创建React Native项目
1 | # 安装React Native CLI |
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 使用物理设备
- 启用设备的开发者选项
- 启用USB调试
- 连接设备到电脑
- 运行
adb devices确认设备已被识别 - 执行
npx react-native run-android
4.2 使用模拟器
使用Android Studio模拟器:
- 启动Android Studio
- 打开AVD Manager
- 创建新的虚拟设备
- 启动模拟器
- 执行
npx react-native run-android
使用Genymotion:
- 从Genymotion官网下载并安装
- 创建新的虚拟设备
- 启动模拟器
- 执行
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 | # 生成生产APK |
7. 版本管理
7.1 依赖更新
1 | # 更新React Native |
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. 最佳实践
- 使用Expo:对于初学者,Expo提供了更简单的开发体验
- 保持依赖更新:定期更新React Native和相关依赖
- 使用TypeScript:提高代码质量和可维护性
- 模块化代码:将代码组织成可重用的组件
- 性能监控:使用Flipper等工具监控应用性能
- 测试:编写单元测试和集成测试
- 持续集成:设置CI/CD流程自动化构建和测试