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

必须安装的依赖有:NodeJDKAndroid 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,因为在此系统上禁止运行脚本 解决方案:

三、安卓环境

1. 安装 Android Studio

地址:https://developer.android.google.cn/studio/

React Native项目运行到Android studio react native安卓_npm

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

  • 安装:(直接看图)

React Native项目运行到Android studio react native安卓_android_02

最好不要更改安装目录

  安装完毕后,就可以启动了,这里说明一下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。

  • 配置路径:

React Native项目运行到Android studio react native安卓_前端_03

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

React Native项目运行到Android studio react native安卓_前端_04


React Native项目运行到Android studio react native安卓_react_05

我这是卸载后有重新安装的,如果第一次安装应该还会多一步:安装界面中选择"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(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)

React Native项目运行到Android studio react native安卓_android_06

  • 配置Android SDK Build-Tools

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

React Native项目运行到Android studio react native安卓_react_07

  • 配置NDK

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

React Native项目运行到Android studio react native安卓_npm_08

最后点击"Apply"来下载和安装这些组件。

React Native项目运行到Android studio react native安卓_react_09


React Native项目运行到Android studio react native安卓_前端_10

React Native项目运行到Android studio react native安卓_react_11


React Native项目运行到Android studio react native安卓_npm_12

3. 配置 ANDROID_HOME 环境变量

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径,从而正常进行编译。

React Native项目运行到Android studio react native安卓_android_13

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

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

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

React Native项目运行到Android studio react native安卓_前端_14


在cmd输入adb测试一下:

React Native项目运行到Android studio react native安卓_react_15

四、准备安卓设备

4.1 安卓模拟器

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

adb devices

React Native项目运行到Android studio react native安卓_npm_16

4.2 安卓真机

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

React Native项目运行到Android studio react native安卓_react_17

五、创建项目并启动

  • 创建
npx react-native init AwesomeProject
  • 启动
cd AwesomeProject
yarn android
# 或者
yarn react-native run-android

React Native项目运行到Android studio react native安卓_react_18

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

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

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

成功界面:

React Native项目运行到Android studio react native安卓_前端_19

六、投屏工具

GitHub地址:https://github.com/Genymobile/scrcpy