分享好友 最新动态首页 最新动态分类 切换频道
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黑窗口,再重新执行一次。


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


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

最新文章
史上最小安卓机 索爱SK17i港行到卖香港手机「史上最小安卓机 索爱SK17i港行到卖」
  【PConline香港 行情】索尼爱立信所推出的手机一直以年青人为主要的对象,旗下的手机更是融入了许多当前流行的元素。最近,索尼爱立信同时推出了三款新品,同样也是以学生一族为主要对象,而其中包括了Xperia Mini SK17i(以下简称为SK
捡部手机归还途中被偷,到底谁负责捡到手机不归还违法吗「捡部手机归还途中被偷,到底谁负责」
【案例简介】近日,重庆一大学女生捡到一部iPhone6Plus手机,在归还失主的途中,手机被偷。失主要求其赔偿或买同款新机,最后,女大学生妥协,分期付款买了部iPhone6Plus赔偿。据大学生说,遗失的手机是自己面试途中在卫生间捡到的,手机没
玩java游戏买什么手机好用又便宜_每一款JAVA游戏都是经典,但只有四款游戏,是90%玩家从小玩到大...什么手机好用又便宜「玩java游戏买什么手机好用又便宜_每一款JAVA游戏都是经典,但只有四
2000年彩屏手机开始流行,诺基亚作为当年世界第一的手机厂商,更是研发出了多款造型酷炫的手机,例如翻盖、推盖以及后来的触屏机,都曾被我们使用过。我还记得当年小的时候,拿着爸爸的手机在上面搜索和下载
如何正确使用蓝光雷达?这种雷达的使用有哪些应用场景?
蓝光雷达:应用场景与正确使用方法在当今科技飞速发展的时代,蓝光雷达作为一种先进的技术手段,正逐渐在多个领域发挥着重要作用。然而,要想充分发挥其优势,正确的使用方法至关重要。首先,我们来了解一下蓝光雷达的工作原理。蓝光雷达是
优秀的 WIFI 渗透工具汇总手机平台「优秀的 WIFI 渗透工具汇总」
今天给大家收集和整理了一些常用的 WiFi 渗透工具,工具对于我们这些人来说是最熟悉的东西之一了,选择一个好的工具会让你事半功倍。(工具顺序不分名次) WIFI 监听网卡推荐 3070 和 8187,二者各有优劣&#x
调整了!平均降价63%!
近日《国家基本医疗保险、工伤保险和生育保险药品目录(2024年)》正式落地实施参保人在医院药店购药按照新版目录执行此次调整共有91种药品新增进入国家医保药品目录同时43种临床已被替代或长期未生产供应的药品被调出此次调整新增的91种药
正在阅读:手机模拟大师怎么卸载手机模拟大师怎么卸载手机模拟大师「正在阅读:手机模拟大师怎么卸载手机模拟大师怎么卸载」
近日有一些小伙伴咨询小编关于手机模拟大师怎么卸载呢?下面就为大家带来了卸载手机模拟大师的方法步骤,有需要的小伙伴可以来了解了解哦。手机模拟大师怎么卸载?卸载手机模拟大师的方法步骤您可以通过搜索或者打开电脑安装软件的文件夹,找
蘑菇云游 v3.2.0蘑菇云手机「蘑菇云游 v3.2.0」
蘑菇云游是一款云游戏平台而且里面的游戏种类很丰富,海量游戏,包含全网最热门的游戏作品,快来玩得好手游。该版本解锁了无限时间,没有时间的限制随便玩。该版本解锁了无限钻石,想怎么玩就怎么玩。支持到了非常多的热门的手游、端游、大
小米 MIX 2S电池不耐用?先看看手机电池健康度小米手机电池「小米 MIX 2S电池不耐用?先看看手机电池健康度」
小米 MIX 2S手机使用久了电池不耐用、耗电快这些问题总是会碰到。那么小米 MIX 2S手机电池健康和使用情况等信息怎么查看?根据小米MIUI 不同版本小编总结了两个适用所有小米/红米手机电池健康查询方式对着步骤一定能查到。1、手机【设置】-
纯平背板+超竞全面屏,直板手机终极形态红魔9 Pro发布红魔手机「纯平背板+超竞全面屏,直板手机终极形态红魔9 Pro发布」
11月23日北京,红魔电竞旗舰最新力作——红魔9 Pro系列正式发布。发布会以“全面·不止电竞”作为主题,诠释了红魔从精于电竞,到不止电竞的全面超竞进化。红魔9 Pro系列作为一款全能电竞旗舰,拥有纯平背板和超竞全面屏,搭配第三代骁龙8
相关文章
推荐文章
发表评论
0评