本文以官网的教程为基础,进行了一定程度的详细描述,并以
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 版本)。
我安装的是JDK
1.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/
如果不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' }
(注意有多处需要替换)。
成功界面:
六、投屏工具
GitHub地址:https://github.com/Genymobile/scrcpy