react-native 环境配置图文教程

官网

博客制作不易(老实说是自己想要记录一下)，如果对你有帮助请三连一下支持一下吧！

环境检查

前置条件(没有的请自行百度一下)：

• node 环境
• java 环境(我用的是 java11，最好能够同步不然会出现奇奇怪怪的错误)

如果不知道有没有的话请打开 cmd 命令行检查

# node
node -v

# java
java --version

全局下载 yarn 包管理器，如果已经下载了请忽略

npm i yarn -g 

如果有正常有出现类似 x.x.x 的版本号，那就代表电脑有的。

接下来就开始我们的安装正题了

Android 的安装

首先我们需要先下载 android studio

下载好后双击进入安装界面，这里需要勾选虚拟设备

这里需要注意的是：安装目录最好是其他盘，我这里只有 C 盘，所以就只好以 C 盘进行演示了

点击不导入配置文件

自定义下载内容

这里是下载 SDK ，最好都选上，我这里是无法选中只好下一步了，之后再弄。另外，SDK 路径最好也配置一下，放在其他盘。同时，这里 SDK 地址后面会在配置环境变量的时候用上，先记上

这里将三个内容都选择接受，方框中选中的也要继续，我这里就偷个懒

接下来就开始下载了…

下载完成后就开始配置了

Android 组件配置

首先我们需要打开 SDK Manager

接着勾选右下角的 Show Package Details

接着找到 SDK Platforms 下面的版本 33 中的 Android SDK platform 33 以及 Intel x64 Atom System Image 两个选项

然后切换到 SDK Tools 并勾选 show package details

然后下载版本为 33 的(必须和前面的对应上)

最后，为了后面我们能够使用真机进行运行，所以还需要一个 adb 工具

最后点击 Apply 进行安装这些组件

配置环境变量

我们打开环境变量(控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 ->新建)

创建一个名为 ANDROID_HOME 的环境变量(系统)指向一个你的 Android SDK 所在的目录

配置完成后，找到系统环境变量中的 Path，向里面添加工具目录路径

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

最后最后，一定记得确认应用保存，不要一下子就给关掉了，这样会导致根本没有保存，到时候就得重来了。

创建项目

在命令行中输入以下命令就可以创建项目了

npx react-native@latest init AwesomeProject

然后会出现一堆下载依赖，如果长时间停止不动了，可以回车试试

同样，如果左下角停止转动了回车可以试试

最后变成这样就表示项目创建成功了！接下来运行试试

接下来在 Android Studio 打开这个项目，打开 advice manager 将默认设备删除了，重新创建一个
设备选择一个想要的，点击下一步，最后来到下图这个界面，一定要选择33版本的(并且不要有 Google API 字样的)

最后在终端中输入

yarn start 

# 新开一个终端
yarn android

如果正常就可以看见它会调用手机虚拟机并安装软件运行了！

如果想要在自己的手机上运行(usb 连接上电脑，并且手机打开开发者模式！)，就需要使用 adb 工具进行端口转发

adb reverse tcp:8081 tcp:8081

如果运行不起来，有可能是 8081 被占用了，当然，前提是你安装好了 adb 并且能使用