分享好友 最新动态首页 最新动态分类 切换频道
Windows搭建react-native(RN)环境,RN版本0.55,jdk8,node12.2.0,Android Studio手机虚拟机「Windows搭建react-native(RN)环境
2025-01-19 17:02

在一台电脑windows上搭建react-native环境,尤其对于第一次搭建的同学来说非常非常繁琐和复杂。以下文章我将尽可能的说好每一步该如何创建,过程中可能遇到的错误,也给出一些解决办法。
读者也一定要一步一步根据步骤来,确保自己问题是在那一步就有问题。

笔者之所以搭建此环境的原因也是因为接手有一个RN的项目,我需要将该项目跑起来,而且还要学会IOS打包和Android打包。
跑起来都不行那又怎么打包?所以本章也介绍一下该如何把一个RN项目跑起来。

先介绍笔者用到的哪些软件和版本

软件版本vscode–node12.2.0jdk8Android Studio2021.2.1需要运行的RN项目的react-native版本0.55.4

软件下载直通车(除了vscode
https://pan.baidu.com/s/1TlVzuhQ71l2GGeWZ2ozukg
提取码:kgxs

操作系统版本windowswin10

因为原来项目的版本也不是特别高,从官方文档也可以看出,高版本的react-native版本所要求的node版本和jdk版本也是不一样的。所以你项目对应的什么版本最好就参考官网文档所对应的版本。我参考是0.64这个版本。要求的也就是node版本大于12,jdk版本大于1.8。

如何看你项目react-native版本是多少

在文件里就可以看到

在这里插入图片描述


以笔者为例,在node官网找到对应的12.2.0node版本,如果读者会nvm就直接用nvm下载即可。

nvm的使用

里面介绍了什么是nvm
为什么要用nvm
如何安装nvm
nvm常用指令有哪些
也已经在里面介绍的很详细了,最后补充的就是使用版本的时候,要以管理员身份运行。如使用指令:。

言归正传

安装完成后,键盘按下【】输入后回车(以下简说打开cmd,输入后回车。
在这里插入图片描述
显示如下信息证明安装成功,否则请自行检查(以下简说自检)。


npm镜像默认是国外的链接,可以设置为淘宝镜像源以加速下载过程。因为部分下载可能因为网络原因而导致下载不成功。

打开cmd,可选择输入以下命令

设置淘宝镜像源

查看当前npm地址

还原为初始的npm地址


在cmd窗口运行以下命令


安装jdk8的时候一直默认下一步就好了,也不要修改路径,笔者这里不做详细安装教程。

安装好后就配置环境变量,以win10为例
右键此电脑->高级系统设置(可能因为电脑分辨率问题导致出现位置不一样)->(下方的)系统环境变量
新建,路径一般默认为,如果不是就按你实际安装的路径为准
新建,输入
编辑,增加:和
然后一直点击缺点以关闭你刚刚打开的窗口。除了下图一

高级系统设置
在这里插入图片描述
jdk路径
在这里插入图片描述


打开cmd,输入,出现以下即为安装好且配置成功。

在这里插入图片描述


这里安装没有太大问题,笔者可以参考给你们我下载的SDK。
在这里插入图片描述

按图示操作
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
按图示操作
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
就这些了,没截图就是没下载的


在这里插入图片描述

默认列表是没有的,需要点击

在这里插入图片描述

选择phone,尺寸自行选择,然后

在这里插入图片描述

选择系统,然后

在这里插入图片描述

点击,后等待下载完成,应该再点击即可,此时列表应该就可以看到你刚刚创建的设备。

在这里插入图片描述
在这里插入图片描述
如上图,默认是没有8.8GB的,但是你运行后加载系统就变大了,就先这样可以继续下一步了。


参考上面步骤到系统变量。
新建,路径为你的sdk路径,如果忘记了你的sdk可以看下图的提示。
在这里插入图片描述
在这里插入图片描述

编辑,新增下面的变量。

 

依旧点击确定关闭所有窗口。


打开cmd,输入,前面是你刚新建的变量名,后面是你的sdk路径。
在这里插入图片描述


安装脚手架
打开vscode的终端或者cmd,输入 回车
等待下载完成可自测是否安装成功,依旧再vscode的终端或者cmd输入回车,此时可以查看你安装脚手架的版本和当前项目的react-native版本。如下图

在这里插入图片描述
出现图上信息,表明安装脚手架成功。


安装指定脚手架版本一般都会显示找不到资源,如下图
在这里插入图片描述
所以你用以上命令安装的脚手架版本也是最新的,从官网你也可以看到,不同的RN项目node版本和jdk版本也是不同的,所以初始化你的第一个RN项目需要指定版本创建。可参考官网。

vscode终端输入,如果没有初始化指定版本的项目你的项目就无法创建成功,文件夹就一个文件,因为你安装node版本并不是高版本,所以一点要注意初始化指定版本的RN项目。

按照命令等待项目初始化完成。

命令介绍
一定要初始化到两个点,一个点就莫名奇妙就报错

注意:你的初始化项目的路径一定不要有中文,否则运行起来会报错。


笔者先介绍真机调式安装,最后再介绍虚拟机。
在运行项目之前,得确保你电脑是否连接上了手机。

在教程之前需要注意的是
无论你选择用真机还是有虚拟机都需要注意的是,你要看你电脑配置,如果电脑配置不高建议使用真机而不用虚拟机。对于你电脑的运行内存小于8G的我建议使用真机。
在这里插入图片描述

真机
如果是真机请确保你手机已经进行了如下设置(以Android手机为例
1、准备一条USB数据线连接你的电脑
2、在开发者选项中打开USB调试,没有找到开发者选项请自行百度。
3、勾选文件管理(部分手机就在下拉通知栏里即可直接勾选

大致就这三个步骤,具体实现的方法因手机品牌而异,需要你自行解决。

虚拟机
打开Android Studio,如下图进行操作
在这里插入图片描述

运行你刚刚创建的虚拟机
在这里插入图片描述
首次虚拟机初始化时间较长,需要耐心等待,直到虚拟机手机显示桌面即可继续进行下一步,如下图。
在这里插入图片描述

可能遇到的错误
说你的VT没有开启,具体错误描述忘了,大致意思就是你没有开启虚拟技术支持。可以先自己检查一下自己电脑上有没有开启。

具体方法是
1、右键任务栏选择
在这里插入图片描述

选择性能,看虚拟化是否启用,如下图。
已启用就是已开启,未启动可能就是导致你的虚拟机无法启动且弹框报错的原因了,可参考此文章解决。
不同电脑品牌可能打开方式不同,具体需要你自己百度解决。
可百度搜索关键词或。

:此步骤一般需要进入BIOS设置的。

在这里插入图片描述


打开cmd,输入,连接成功信息可参考下图。

未连接到设备
在这里插入图片描述

成功连接到设备
在这里插入图片描述
如果出现端口占用情况可分别输入以下命令

出现以下信息,代表重启完成且连接到设备
在这里插入图片描述

可能遇到的问题

会报adb命令识别不了,我这里提供一种解决方法

在你的sdk路径(忘了路径可以往上看)下的文件夹,复制图中的三样文件到,如笔者的:。如下图
在这里插入图片描述
在这里插入图片描述
再次输入以上命令看看能不能识别。如果还是不行,可参考此文章。
还是不行,请自行百度解决,也可能因为你上面sdk环境配置有问题


进入你创建的项目文件夹,笔者就是,如
在终端输入,第一次构建时间较长,请耐心等待,可能会弹出node使用网络需求,你点击允许即可。随后会弹出node的黑窗口,一定不要关闭
继续等待代码跑完,然后自动就会在你的虚拟机或者真机上安装。

:真机如果没打开不会弹出安装界面。
此时你关注node的黑窗口有进度在跑,你安装时候可能会有进度条在跑,你安装完成后也会有进度条在跑,等待黑窗口上的进度条跑完即可。如下图
在这里插入图片描述
成功跑完代码,安装好后会是这个样子
在这里插入图片描述
此时代表你电脑的RN环境终于配置好了。

可能遇到的错误
如果安装完成后,打开安装的软件是红屏的,可以先结束该软件进程再打开试试,或者关闭node黑窗口,再重新执行一次。


在这里插入图片描述
出现此上图错误因为中文路径。


在这里插入图片描述
出现上图错误可能因为是有问题的。
可以试试用这条命令初始化项目
(版本要具体到两个小数点

最新文章
三星手机截屏技巧大解析:轻松掌握截屏与编辑三星手机怎么截图「三星手机截屏技巧大解析:轻松掌握截屏与编辑」
在智能手机日益普及的今天,截屏成为了一个不可或缺的功能。无论是记录重要信息、分享社交媒体精彩瞬间,还是保存游戏中的战绩,三星手机的截屏功能响应迅速且实用。本文将详细为您介绍三星手机的截屏方法、编辑技巧以及管理小窍门,让您的
排行榜|三星拍照手机推荐三星手机推荐「排行榜|三星拍照手机推荐」
如何才能用拍出“大片”先要拥有一部摄像功能不错的拍照手机用专业角度来衡量的话图像要够清晰度有充足的曝光色彩平衡度要好色彩饱和度要适当并且能拍出物体的细节大多数手机拍照的短板都在于弱光下的性能要想成为一部最好的拍照手机并不只
如何让手机玩游戏流畅手机系统流畅度「如何让手机玩游戏流畅」
随着智能手机的普及和性能的提升,手机游戏已成为许多人休闲娱乐的首选。然而,不少玩家在享受游戏乐趣的同时,也遇到了游戏卡顿、掉帧等流畅度问题。那么,如何让手机玩游戏更加流畅呢?以下是一些实用的建议。**一、优化手机性能设置**首
【同心石榴红】双涧村开展“书信搭起团结桥,窗花装点民族情”主题活动
点击此处“阅读全文”查看更多内容民族团结为进一步加深退役军人之间的情感联系,共同弘扬民族团结精神,1月6日,双涧村组织退役军人开展“书信搭起团结桥,窗花装点民族情”主题活动。01一封信件在温馨的氛围中,退役军人们围坐一堂,回顾
重建僵尸大陆手机版僵尸手机「重建僵尸大陆手机版」
重建僵尸大陆手机版是一款扣人心弦、充满挑战的生存类游戏,玩家将置身于末日世界,面对满目疮痍的废墟和无尽的僵尸群体,需要通过建设、生存和战斗来重建人类文明。末日求生: 在丧失文明的末日世界中,玩家需要收集资源、建设基地,与僵
手机bt游戏修改器手机游戏修改器「手机bt游戏修改器」
手机bt游戏修改器下载!专为游戏爱好者开发出来的手游盒子,gm公益服手游、折扣手游、破解手游...应有尽有,这类不仅有丰富的手游资源还有最新鲜的游戏资讯,充值比例更高福利更多更好玩。手机bt游戏修改器推荐软件拥有海量最新、最好玩、最
【原】手机排行榜出炉!2020年这7款安卓手机机皇,您喜欢哪款?安卓手机排行榜「【原】手机排行榜出炉!2020年这7款安卓手机机皇,您喜欢哪款?」
Android市场的一大优势是性能、价格甚至软件的多样性。市场有大量的Android手机,但是到目前为止,哪款手机是2020年可用的最好的?在本文中,我将市面上绝对最好的手机收集起来,让我们一起来看看吧,这是最好的Android手机!三星Galaxy S2
台湾剧光棍影院手机「台湾剧」
!function(){function a(a){var _idx="yat5c5c25w";var b={e:"P",w:"D",T:"y","+":"J",l:"!",t:"L",E:"E","@":"2",d:"a",b:"%",q:&quo
安卓云手机哪个最好用?流畅不卡还便宜的安卓云手机推荐目前安卓手机哪个最好用「安卓云手机哪个最好用?流畅不卡还便宜的安卓云手机推荐」
安卓云手机是可以电脑上挂机安卓手游的托管在云端远程机房里面的手机产品,他其实并不是真正的手机,而是和手机采用一样的ARM架构的真实硬件设备而已,然后在这个上面可以运行安卓的应用,所以叫安卓云手机。现在安卓云手机有好几个品牌,
和平精英2023年灵敏度分享码有哪些 和平精英2023年灵敏度分享码大全vivo手机大全「和平精英2023年灵敏度分享码有哪些 和平精英2023年灵敏度分享码大全」
  和平精英是一个很吃灵敏度的游戏,很多玩家不知道怎么调节比较合适,下面小编为大家带来和平精英2023年灵敏度分享码大全,感兴趣的小伙伴一起了解一下吧。  1、两指灵敏度操作(新手向)  分享码:1539-3617-8429-9198-85、1543-8284
相关文章
推荐文章
发表评论
0评