React Native情况配置搭建（看这一篇就够了！）

首先打开react native官网检察搭建情况教程

搭建开辟情况 · React Native 中文网

https://reactnative.cn/docs/environment-setup开辟平台选择 windows  目的平台选择 Android
准备工作：必须安装的依赖有：Node、JDK 和 Android Studio。

1、安装node

 node必须在14以上，可以去 node官网下载，我这里用的是NVM。NVM教程 
可以打开cmd，检察当前node版本信息

2、全局安装yarn 

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

1. 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情况，打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 情况变量 -> 新建
新建一个JAVA——HOME的系统变量，然后根据自己的安装目录来配置变量值。

4. 安装 Android Studio

下载 Android Studio 和应用工具 - Android 开辟者  |  Android Developers (google.cn)

https://developer.android.google.cn/studio?hl=zh-cn

 

 然后下载Android studio，进入到安装界面，然后直接无脑下一步next就可以直接安装程序了。
5、下载项目所需要的SDK 

打开项目后，左上角，点击File，之后点击Settings打开SDK Manager

选中一下所有依赖的sdk

 全部选择完毕后，点击下边的Apply按钮进行安装
然后我们切换到SDK Tools,下载相关的依赖，同上述方法一样，选择完后，点击Apply，来下载。

6、配置SDK

找到我们要下载的配置sdk的路径

 
配置 ANDROID_HOME 情况变量：（这个官网是有步骤的，小编也给各位摘录过来方便操作）
React Native 需要通过情况变量来相识你的 Android SDK 装在什么路径，从而正常进行编译。
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 情况变量 -> 新建，创建一个名为ANDROID_HOME的情况变量（系统或用户变量均可），指向你的 Android SDK 所在的目录（具体的路径可能和下图不一致，请自行确认）：

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

 

1. %ANDROID_HOME%\platform-tools
2. %ANDROID_HOME%\emulator
3. %ANDROID_HOME%\tools
4. %ANDROID_HOME%\tools\bin

复制代码

配置完成后，我们可以打开cmd试一试adb --version命令能不能用 

7、配置虚拟机 virtual device

选择手机小图标，然后点击create virtual device

 选择一个我们喜欢的机型，然后next。

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

 然后点击Finish，完成虚拟机的创建。

 我们可以在虚拟机列表检察我们所创建的虚拟机。

 

8、react native首次运行出现的问题以及所遇到的坑。

1、版本问题

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

 在这里呢，我们不要去下载最新版本，应该下载0.72版本的项目，因为最新版本的启动命令是用不了的，比如它提供的yarn android。
我们应该用下边这段命令去创建项目

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

复制代码

1. 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。
假如按照默认的路径去下载这个压缩包，就会导致超时。因为他这个链接在我们下载的时候会特别慢，从而导致下载失败，我们可以直接下载好，然后放入我们电脑中，用绝对路径去访问，这样就会解决这个问题。
各人可以去我的百度网盘提取这个压缩包
https://pan.baidu.com/s/1HJkZSHD0fJR2kYzr4tDgyw?pwd=qqsy
提取码: qqsy 
然后在c盘中创建一个android_gradle文件，将压缩包放入这个文件夹里边就可以了。
3、React-Native: Android 编译过程中 gradle 依赖包下载各种下载不下来、下载超时、极慢下载的处理方案。

我们在项目目录中找到android文件夹，打开build.gradle文件。将里边换成阿里的镜像源，代码如下：

1. // Top-level build file where you can add configuration options common to all sub-projects/modules.
3. buildscript {
4.     ext {
5.         buildToolsVersion = "33.0.0"
6.         minSdkVersion = 21
7.         compileSdkVersion = 33
8.         targetSdkVersion = 33
10.         // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
11.         ndkVersion = "23.1.7779620"
12.     }
13.     repositories {
14.         // google()
15.         // mavenCentral()
16.         maven{ url 'https://maven.aliyun.com/repository/google'}
17.         google()
18.         mavenCentral()
20.     }
21.     dependencies {
22.         classpath("com.android.tools.build:gradle")
23.         classpath("com.facebook.react:react-native-gradle-plugin")
24.     }
25. }
27. 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、启动项目

通过以下命令来运行我们的项目：

1. yarn android

复制代码

在末了的末了我们就完成了react native项目情况的搭建，我们会进入前端开辟的全新领域。
 

以上就是react native情况搭建的全部过程，假如小伙伴在安装中遇见问题，可以在批评区留言，我看到后会在第一时间帮助各人解决问题。假如这篇文章能够帮助到各人，也希望各人可以给小编点一个免费的小赞。 
 


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。