惊呆了！超详细ReactNative环境配置

宝林牧云
940 阅读6分钟

惊呆了！超详细ReactNative环境配置

以下针对于Window系统平台

第一阶段

说明：Node 的版本必须高于 8.3，Python 的版本必须为 2.x（不支持 3.x），而 JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本）。安装完 Node 后建议设置 npm 镜像以加速后面的过程（或使用科学上网工具）；来自 reactnative.cn/docs/gettin…

1.安装python2.x（注意是版本2.X，不能是3.x的版本）。对于python的安装和基本了解，可以参考这篇：blog.csdn.net/u012475786/…

2.安装nodejs最新版，安装直接下一步即可；

3.通过npm install -g cnpm命令全局安装cnpm(国内镜像的包管理器，避免npm包下载网络延时问题)；然后通过cnpm命令全局安装react-native-cli(脚手架工具)和yarn包管理器；cmd命令如下：

  1. npm install -g npm
  2. cnpm install -g react-native-cli yarn

yarn源于Facebook公司，用于替代npm或cnpm，用来加速第三方依赖下载安装，建议优先使用yarn，在ReactNative项目中，使用npm或cnpm下载，会遇到某些包下载错误或不完整；yarn基本命令总结：

  1. 安装package.json依赖：yarn install
  2. 安装全局包：yarn global add xxx(包名)
  3. 安装包：yarn add xxx等同于yarn -D add xxx
  4. 移除包：yarn remove xxx
  5. 查看包列表：yarn list
  1. JDK下载安装和环境配置参考以下链接：baijiahao.baidu.com/s?id=159943…

总结：Python2.x（低于Python3版本即可），JDK1.8版本安装，nodejs8.3以上(安装nodeJS之后就可以在cmd命令行中使用npm命令，然后分别安装cnpm，react-native-cli和yarn)。

第二阶段

1.准备一台安卓手机，也可以用安卓虚拟机。但是由于虚拟机占内存大，容易使电脑变卡顿。造成开发不爽，建议使用真机测试。

2.将真机USB连接到电脑，并在手机设置中打开“开发者模式”，选择“USB调试”。

3.下载安装Android SDK软件工具包，下载地址如下：www.androiddevtools.cn/

在这里插入图片描述

将下载好的AndroidSDK压缩包解压到某个目录下面，注意需要记住解压目录位置。建议不要放在C盘，如果用到安卓虚拟机，AndroidSDK目录会变的很大。接下来，参照以下AndroSDK目录位置介绍。（用真机测试，所以放在了C盘）

C:\android-sdk_r24.4.1\android-sdk-windows\

  • 在系统环境变量中配置变量名ANDROID_HOME,值为AndroidSDK目录路径；如下图所示：
    在这里插入图片描述
  • 在变量名为Path下的变量添加以下配置值，注意每个路径必须以“;”隔开；

;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools\bin;

配置如图所示：

在这里插入图片描述
说明：以上配置主要在cmd命令行中可以全局访问android和sdkmanager命令，如图所示：
在这里插入图片描述

说明：Android SDK是针对安卓开发使用的开发工具包，用于为特定的软件包、软件框架、硬件平台、操作系统等建立应用软件的开发工具的集合。它提供了Android API库和开发工具构建，调试安卓应用等功能。总而言之，它是支持开发和运行安卓应用的一个软件平台。

  1. 配置Android SDK 在安装目录下点击SDK Manager.exe文件，会出现如下图所示页面，然后安装相应的工具包。注意必须安装SDK tools，platform-tools和build-tools这3个工具包；
    在这里插入图片描述

sdk tools：包含了很多重要工具：.9patch工具，monkeyrunner压力测试工具，性能追踪可视化工具traceview；还有Android系统api，针对不同的系统api，对接口和性能做了调整，这也是Android SDK的核心。

platform-tools：包含了很多重要工具：adb安卓调试工具（以命令行的形式和虚拟机或者真机进行通讯）；sqlite3工具（可以查询移动数据库信息）等其它工具。同上，其他工具可以参考Google的开发者文档了解。

build-tools：aapt工具，aidl工具和打包工具（apkbuilder,dex工具）

  1. 使用命令react-native init rndemo初始化ReactNative项目。初始化成功后进入该目录使用react-native run-android命令启动项目，第一次启动会比较慢，因为需要下载Gradle构建工具。由于外网原因，可能导致下载失败项目运行失败。多试几次，如果还不行，根据启动项目提示的Gradle版本，去下载相应版本的Gradle工具压缩包（注意版本），下载链接：services.gradle.org/distributio… 我需要的gradle-4.10.2-all.zip，如下图所示
    在这里插入图片描述
    下载gradle压缩包成功后，打开如下目录（目录路径各有不同），然后解压文件,示例如下图所示：
    在这里插入图片描述
    再重新使用react-native run-android命令重新启动命令，稍等几分钟，一般来说就会启动成功，你连接的手机就会出现相应的ReactNative启动界面；

启动失败问题总结：

  1. 根据报错看看手机有没有正常连接到电脑；（一般会提示设备找不到）
  2. AndroidSDK系统变量有没有正常配置，通过命令行输入android能不能正常输出；
  3. sdk tools、platform-tools、build-tools有没有正常安装（这3个必须安装）；
  4. Gradle构建工具有没有正常下载并解压到相应的目录；
  5. 第一次启动有可能会出现如下所示报错，一般来说是SDK没有被授权，在命令行使用sdkmanager --licenses命令进行授权，如果有报错 Error: Unknown argument --licenses，那么先使用sdkmanager --update命令更新SDK，然后在使用sdkmanager --licenses命令。
info Starting JS server...
info Building and installing the app on the device (cd android && ./gradlew app:installDebug)...

> Configure project :app
Checking the license for package Android SDK Build-Tools 28.0.3 in /usr/local/Caskroom/android-platform-tools/28.0.1/licenses
Warning: License for package Android SDK Build-Tools 28.0.3 not accepted.
Checking the license for package Android SDK Platform 28 in /usr/local/Caskroom/android-platform-tools/28.0.1/licenses
Warning: License for package Android SDK Platform 28 not accepted.

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> Failed to install the following Android SDK packages as some licences have not been accepted.
     build-tools;28.0.3 Android SDK Build-Tools 28.0.3
     platforms;android-28 Android SDK Platform 28
  To build this project, accept the SDK license agreements and install the missing components using the Android Studio SDK Manager.
  Alternatively, to transfer the license agreements from one workstation to another, see http://d.android.com/r/studio-ui/export-licenses.html

  Using Android SDK: /usr/local/Caskroom/android-platform-tools/28.0.1

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 0s
error Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have

备注：平常直接安装Android Stuio编辑器来开发ReactNative项目，对配置理解不够深刻，特意从零配置Rect Native环境，并记录配置过程中遇到的问题，如果你们遇到有其他问题，欢迎提出，做个总结，防止后人踩坑；

avatar
文章
阅读
粉丝