安装配置 Node、JDK、Android Studio、Android SDK、Android Virtual Device 手机模拟器、react-native
一、安装 Node
- Node 版本要求
v16 以上的偶数号版本
- Node 下载地址
https://nodejs.org/en/download
- 查看安装后的 Node 版本
node -v
二、安装 JDK
- JDK 版本要求
v11 版本
或者
低于 0.67 版本的 React Native 需要 JDK 1.8 版本（官方也称 java 8 版本）。
- JDK 下载地址
// JDK 11
https://www.oracle.com/java/technologies/downloads/#java11
// JDK 8
https://www.oracle.com/java/technologies/downloads/#java8
- 查看安装后的 JDK 版本
// JDK 11
javac - version;
// JDK 8
java - version;
三、安装配置 Android Studio
1. 下载 Android Studio
// 下载地址
https://developer.android.google.cn/studio?hl=zh-cn
2. 安装 Android Studio
安装到 Install Type 步骤时，选择 Custom --> 下一步，全部勾选 Android SDK、Android SDK Platform、Android Virtual Device
--> 下一步 --> accept --> finish 等待 --> 结束后打开 Android Studio
3. 配置 Android Studio 的 SDK Manager
在 Android Studio 的 Welcome to Android Studio 启动页，点击 more action --> 点击 SDK Manager
-->在 SDK Manager 中选择 SDK Platforms 选项 --> 然后在右下角勾选 Show Package Details --> 勾选 Android 13.0 下的
√ Android SDK Platform 33
√ Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）
--> 选择 SDK Tools 选项卡 --> 然后在右下角勾选 Show Package Details --> 勾选 Android SDK Build-Tools 34 下的
√ 33.0.0
--> 点击 apply --> ok
4. 配置 Android SDK 的环境变量
React Native 需要通过环境变量来了解 Android SDK 装在什么路径，从而正常进行编译
- 查看 Android SDK 的安装路径
在 Android Studio 的 Welcome to Android Studio 启动页，点击 more action --> 点击 SDK Manager
--> 上方的 Android SDK Location 路径就是 Android SDK 的安装路径 --> 拷贝
- 配置 Android SDK 的环境变量
打开控制面板 --> 系统和安全 --> 系统 --> 高级系统设置 --> 高级 --> 环境变量
--> 新建，创建一个名为 ANDROID_HOME 的环境变量（系统或用户变量均可），变量值为： Android SDK 的安装路径 --> 确认
- 把一些 Android SDK 工具目录添加到环境变量 Path
打开控制面板 --> 系统和安全 --> 系统 --> 高级系统设置 --> 高级 --> 环境变量
--> 双击Path变量，进入path列表 -->双击最下方空行添加：
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin
四、创建 react-native 项目
- 如果之前安装过旧版本 react-native 脚手架，需先卸载
npm uninstall -g react-native-cli @react-native-community/cli
- 创建项目
// 创建最新的 react-native 项目
npx react-native@latest init ReactNativeDemo
// 创建指定版本的 react-native 项目
npx react-native@X.XX.X init ReactNativeDemo --version X.XX.X
// 当执行 npm run android 时会自动启动并连接 Android Virtual Device 手机模拟器
npm run android
五、关于 react-native 连接 Android Virtual Device 手机模拟器
- 打开 Android Virtual Device 手机模拟器
打开 Android Studio --> 点击 More Actions --> 选择 Virtual Device Manager - 在 Device Manager 中可对 Android Virtual Device 手机模拟器进行管理
包括：增加、修改（可修改手机型号，Androd 等级）、删除
网友评论