React Native环境配置构建(看这篇文章就够了！)

首先打开react Native官方网站查看环境建设教程

构建开发环境。 · React Native 中文网。https://reactnative.cn/docs/environment-setup。选择开发平台 windows  选择目标平台 Android。

准备工作：必须依靠࿱安装a;Node、JDK 和 Android Studio。

1、安装node。

 node必须超过14，可以去 node官网下载，我在这里用NVM。NVM教程 。

cmd࿰可以打开c;查看当前node版本的信息

2、yarn全局安装 。

Yarn是 Facebook 提供的替代 npm 工具，可以加速 node 下载模块
第一步已经安装了node，现在可以打开cmd执行以下命令；

npm install -g yarn。

3、安装 Java Development Kit [JDK] 17 。

Java Downloads | Oracle。https://www.oracle.com/java/technologies/downloads/#jdk17-windows。

React Native 需要 Java Development Kit [JDK] 17。您可以在命令行中输入 。javac -version。（请注意是 javac，不是 java）查看您目前安装的内容 JDK 版本。如果版本不符合要求󿀌你可以去Temurin或Oracle JDK上下载(下载后需要注册登录)。

 java环境配置#xff0c;打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建。

JAVA-HOME新建系统变量，然后根据自己的安装目录配置变量值。

4. 安装 Android Studio。

下载 Android Studio 和应用工具 - Android 开发者  |  Android Developers (google.cn)。https://developer.android.google.cn/studio?hl=zh-cn。 。

 然后下载Androidid studio，进入安装界面，然后下一步next可以直接安装程序，直接无脑。

5、SDKK下载项目所需的SDK 。

项目开放后󿀌左上角，点击File󿀌点击Settings打开SDK Manager。

选择所有依赖的sdk。

 所有选择完成后�点击下面的Apply按钮安装。

然后我们切换到SDKK Tools,下载相关依赖，与上述方法相同󿀌选择后󿀌点击Apply󿀌来下载。

6、配置SDK。

找到配置sdk的路径，我们想下载。

 。

配置 ANDROID_HOME 环境变量：（这个官方网站有一个步骤，小编也为您提取了方便操作的摘录#xff09;

React Native 你需要通过环境变量来了解你 Android SDK 什么路径，从而正常编译。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建环境变量（，称为ANDROID_HOME;系统或用户变量可以），指向你的 Android SDK 目录（具体路径可能与下图不一致，请自行确认）：

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

 。

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

配置完成后可以打开cmd试试adbb --version命令能否使用？ 。

7、配置虚拟机 virtual device。

选择手机小图标󿀌然后点击createeater virtual device。

 选择我们喜欢的型号，然后next。

 选择我们之前下载的33版，然后点击next。

 然后点击Finish#xf0c;创建虚拟机。

 我们可以在虚拟机列表中查看我们创建的虚拟机。

 。

8、react native第一次运行的问题和遇到的坑。

1、版本问题。

在react native官网为我们提供了两个下载命令，下载最新版本和指定版本。

 在这里󿀌不要下载最新版本，项目࿰应下载0.72版本c;因为最新版本的启动命令不能使用，例如，它提供的yarn android。

我们应该用下面的命令来创建项目。

npx react-native@X.XX.X init AwesomeProject --version X.XX.X。

npx react-native@0.72 init demo --version 0.72。

 2、android gradle-8.0-bin-zip下载失败，下载缓慢。

 然后在我们完成项目后，我们需要修改。gradle文件夹下的gradle-wrapper.properties文件。

将此段改为distributionUrl=file:///C:/android_gradle/gradle-8.0.1-all.zip。

如果按照默认路径下载压缩包，会导致超时。因为他的链接在我们下载的时候会很慢，导致下载失败󿀌我们可以直接下载#xff0c;然后放在我们的电脑里󿀌用绝对路径访问，这将解决这个问题。

你可以去我的百度网盘提取这个压缩包。

https://pan.baidu.com/s/1HJKZSHD0fJR2kyzr4tDgywpwd=qqsy。

提取码: qqsy 。

然后在c盘中创建android_gradle文件，将压缩包放入文件夹中即可。

3、React-Native: Android 编译过程中 gradle 依靠包下载各种不能下载、超时下载、极慢下载的处理方案。

我们在项目录中找到android文件夹和#xff0c;打开build.gradle文件。用阿里的镜像源代替里面，代码如下：

// Top-level build file where you can add configuration options common to all sub-projects/modules.buildscript {     ext {         buildToolsVersion = "33.0.0"        minSdkVersion = 21        compileSdkVersion = 33        targetSdkVersion = 33        // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.        ndkVersion = "23.1.7779620"    }    repositories {         // google()        // mavenCentral()        maven{  url 'https://maven.aliyun.com/repository/google'}        google()        mavenCentral()    }    dependencies {         classpath("com.android.tools.build:gradle")        classpath("com.facebook.react:react-native-gradle-plugin")    }}def REACT_NATIVE_VERSION = new File(['node', '--print',"JSON.parse(require('fs').readFileSync(require.resolve('react-native/package.json'), 'utf-8')).version"].execute(null, rootDir).text.trim())。

将原始代码直接更改为上述代码即可。

将原始代码直接更改为上述代码。下载依赖包时，一定要注意我们的网络，可替换为自己的手机热点，尽量使用5G网络。可大大提高下载速度。

9、启动项目。

我们的项目࿱通过以下命令运行a;

yarn android。

最后，我们完成了react native项目环境建设，我们将进入前端开发的新领域。

 。

以上是react native环境建设的全过程，如果小伙伴在安装过程中遇到问题，可在评论区留言，当我看到它时，我会在第一时间帮助你解决问题。如果这篇文章能帮助你，我也希望你能给小编一个免费的小赞。 。