React Native安卓环境搭建（以官网教程为基础进行改进）

本文以官网的教程为基础，进行了一定程度的详细描述，并以Android Studio作为重点进行描述，由于安装环境的具体操作变化很快，故本文也仅供参考，文中所涉及的组件及软件版本为ReactNative-v0.67，Android Studio-2020.3.1，阅读时请注意版本对应必须安装的依赖有：Node、JDK 和 Android Studio。虽然你可以使用任何编辑器来开发应用（编写 js

落花雨时

3745人浏览 · 2022-01-22 14:49:59

落花雨时 · 2022-01-22 14:49:59 发布

本文以官网的教程为基础，进行了一定程度的详细描述，并以Android Studio作为重点进行描述，由于安装环境的具体操作变化很快，故本文也仅供参考，文中所涉及的组件及软件版本为ReactNative-v0.67，Android Studio-2020.3.1，阅读时请注意版本对应
官网教程：https://reactnative.cn/docs/environment-setup，请对比查看

必须安装的依赖有：Node、JDK 和 Android Studio。
虽然你可以使用任何编辑器来开发应用（编写 js 代码），但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境

一、Node及JDK

基本可以参考官网，无太大差异,关于JDK的配置建议百度仔细查一下

注意 Node 的版本应大于等于 12，安装完 Node 后建议设置 npm 镜像（淘宝源）以加速后面的过程（或使用科学上网工具）。
React Native需要 Java Development Kit [JDK] 11。你可以在命令行中输入 javac -version（请注意是 javac，不是 java）来查看你当前安装的 JDK 版本。如果版本不合要求，则可以去AdoptOpenJDK或Oracle JDK上下载(后者下载需注册登录)。

低于 0.67 版本的 React Native 需要 JDK 1.8 版本（官方也称 8 版本）。

我安装的是JDK1.8，能够运行成功，暂时没有发现异常，但是最好按照官网要求安装（我还有其他环境依赖1.8所以没有换）

二、Yarn

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。

npm install -g yarn

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。

如果报错：无法加载文件 C:\Users\XXXX\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行脚本
解决方案：https://blog.csdn.net/witjylzt/article/details/105136274

三、安卓环境

1. 安装 Android Studio

地址：https://developer.android.google.cn/studio/
在这里插入图片描述

如果不fq的话无法访问，我这里分享一个已经下载好的:https://www.aliyundrive.com/s/tW3bxDPnBVF

安装：（直接看图）

在这里插入图片描述

最好不要更改安装目录

安装完毕后，就可以启动了，这里说明一下Android Studio是集编辑器与编译器与一体的软件，也就是说我们的安卓环境中的依赖都需要用它来安装，他就像一个新手机一样，安装好还只是第一步，我们需用用它来下载我们需要的东西

启动后可能会提示这个

不必理会，直接点取消就行

接下来需要配置我们的依赖环境（SDK）

2. 安装 Android SDK

Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 10 (Q)版本的 SDK（注意 SDK 版本不等于终端系统版本，RN 目前支持 android 5 以上设备）。你可以在 Android Studio 的 SDK Manager中选择安装各版本的 SDK。

配置路径：

在这里插入图片描述

默认SDK的位置在你的用户名目录下，但是我的用户名包含中文，不能使用，所以自己建立了一个

在这里插入图片描述

我这是卸载后有重新安装的，如果第一次安装应该还会多一步：安装界面中选择"Custom"选项，确保选中了以下几项：

Android SDK
Android SDK Platform
Android Virtual Device

添加sdk

你可以在 Android Studio 的欢迎界面中找到 SDK Manager。
SDK Manager 还可以在 Android Studio 的"Preferences"菜单中找到。具体路径是Appearance & Behavior → System Settings → Android SDK。（这个我没试）

配置SDK Platforms

在 SDK Manager 中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开Android 10 (Q)选项，确保勾选了下面这些组件（重申你必须使用稳定的代理软件，否则可能都看不到这个界面）：

Android SDK Platform 29
Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件)

在这里插入图片描述

配置Android SDK Build-Tools

然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的29.0.2版本。你可以同时安装多个其他版本。

在这里插入图片描述

配置NDK

然后还是在"SDK Tools"选项卡，点击"NDK (Side by side)"，同样勾中右下角的"Show Package Details"，选择20.1.5948944版本进行安装。

在这里插入图片描述

最后点击"Apply"来下载和安装这些组件。
在这里插入图片描述

在这里插入图片描述

3. 配置 ANDROID_HOME 环境变量

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。
在这里插入图片描述

4. 把一些工具目录添加到环境变量 Path

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量，选中Path变量，然后点击编辑。点击新建然后把这些工具目录路径添加进去：platform-tools、emulator、tools、tools/bin

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

在这里插入图片描述
在cmd输入adb测试一下：

四、准备安卓设备

4.1 安卓模拟器

推荐使用雷电模拟器，一般直接启动就可以查询到，查询命令为

adb devices

在这里插入图片描述

4.2 安卓真机

开启USB调试功能即可，需要进入开发者模式，不同机型具体操作不一致，请自行查询
查询设备方式同上

在这里插入图片描述

五、创建项目并启动

创建

npx react-native init AwesomeProject

启动

cd AwesomeProject
yarn android
# 或者
yarn react-native run-android

在这里插入图片描述

最好不要使用vscode的终端，因为他需要弹出一个新的窗口，在vs中的终端弹不出来，只能在任务管理器结束任务

如果配置没有问题，你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖，耗时可能数十分钟。此过程严重依赖稳定的代理软件，否则将频繁遭遇链接超时和断开，导致无法运行。

也可以尝试阿里云提供的maven 镜像，将android/build.gradle中的jcenter()和google()分别替换为maven { url 'https://maven.aliyun.com/repository/jcenter' }和maven { url 'https://maven.aliyun.com/repository/google' }（注意有多处需要替换）。

成功界面：
在这里插入图片描述