react-native的安装及环境配置

由于项目需求，要做移动端的App,因此要学习react-native，在看教程时很多老师就提到了react-native的环境配置是很难的，那么，今天就来记录一些自己配置react-native的过程

配置环境

由于react-native是基于react框架的，同时，又是基于安卓平台进行开发，所以react需要同时配置node,JDK和android环境，JDK需要8.0（1.8）的版本，node版本要大于12，可以通过打开终端，输入命令java -version;node -v(注意-前有空格)来查看版本。JDK在上Java课时基本都会配置了，node直接去官网上就有安装配置的教程，也不多赘述，那么我们主要讲讲Android的配置以及一些问题。

另外，还要安装yarn,这个直接参考官网上给出的命令就好了。

本文提到的环境配置基本都是基于react-native官网进行补充的，基本上按照官网的教程来就可以。

官网链接https://www.react-native.cn/docs/environment-setup

首先，官网上说的Android官网打不开连接的问题确实时有发生，但拿到连接后下载倒是没有官网上所说的卡顿问题，所以代理软件本人就没有下载，打开官网下载连接确实是个玄学，有时能打开有时打不开，这里直接给出下载连接，复制到迅雷两分钟就能下好
https://r7—sn-ni57rn76.gvt1.com/edgedl/android/studio/install/4.2.2.0/android-studio-ide-202.7486908-windows.exe?mh=2R&pl=24&shardbypass=yes&redirect_counter=1&rm=sn-bvn0o-ju0l7l&req_id=a6ce3222900735ee&cms_redirect=yes&ipbypass=yes&mip=223.104.197.238&mm=42&mn=sn-ni57rn76&ms=onc&mt=1625977235&mv=m&mvi=7&rmhost=r6—sn-ni57rn76.gvt1.com&smhost=r16—sn-ni57rn7s.gvt1.com

后面的配置环境变量直接按照官网上的一步一步来，确保所有依赖都被选中了，这里建议只选择官网给出的依赖，不然文件会很大。

在将path配置完以后，建议先检查Android环境是否配置成功，打开终端，输入android，回车，如果出现图片中的提示，环境就配置成功了，如果提示“android”不是已知命令之类的，就说明之前有那些步骤配置的有问题，就要仔细检查了。

配置react-native脚手架

配置完环境后，我们要来配置react-native的脚手架，官网并没有给出初始化脚手架的命令，只给出了初始化文件的命令，因此，我们先要全局安装react-native脚手架，打开终端，输入以下命令：

npm install -g yarn react-native-cli

注意，输入这个命令之前一定要先确保yarn的已经安装了，不然会报错。

然后我们新建一个目录，用终端打开后，输入命令npx react-native init AwesomeProject即可初始化一个react-native的脚手架，大概如图所示，用过vue-cil一定看他会很熟悉。

###运行代码

我们可以通过虚拟机或真机来运行我们的代码，虚拟机的连接我目前还没研究出来，先讲讲如何连接真机。

首先，我们需要一台安卓手机，打开开发者模式（如何打卡不用品牌的手机不一样，自行百度），打开usb调试，然后用数据线将电脑与手机连接，这时手机会提示连接的模式，这时选择传输文件（似乎也有的手机是传输媒体），在手机端确定。

然后，打开终端，输入adb devices,如果提示List of devices attached下方出现了手机的代号，即为连接成功。

然后我们用终端打开创建好的脚手架，输入命令npx react-native run-android，这时会加载比较长的时间，然后手机会提示你安装一个应用，同意后就能看到脚手架的初始页面了，看到如下页面即为成功：

如果运行中提示没有安卓环境，首先检查环境是否配置完毕，如果配置完毕，打开android studio,打开File-Project structure,进入如下页面后检查换红线的部分文件路径是否是SDK安装的目录，不是的话更改即可。

若提示8081端口占用，在终端输入netstat命令，检查8081端口后面对应的数字，然后输入“tskill 对应数字”,重启软件即可。

其他配置

当我们想用VScode修改代码时，会发现vscode的默认缩进会导致文件的格式改变并报错，这时因为vscode默认是不接受JSX代码的，我们需要将它的语言模式改为JavaScript React,具体修改方式在设置中的搜索框中直接搜索语言模式即可。

另外，建议下载插件React-Native TollS,能够补全代码。

关于每次保存代码都要重新编译，更新应用的方式我现在也没有太好的解决方案0.0