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


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


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

最新文章
十二支队(阿拉善)机关党支部开展预备党员入党宣誓主题党日活动
为进一步加强党员队伍建设,教育引导新发展党员铭记入党初心、强化党员意识、坚定理想信念,按照内蒙古自治区交通运输综合行政执法总队十二支队党委安排部署,机关党支部开展预备党员入党宣誓主题党日活动。活动在庄严的《国际歌》声中拉开
仁怀:“手机课堂”助老人开启“智慧生活”老人智能手机「仁怀:“手机课堂”助老人开启“智慧生活”」
为让老年人享受智能科技带来的便利,仁怀市老年大学开设“手机课堂”,帮助老年人全面掌握智能手机使用方法,提升老年人生活质量和幸福感。在老年大学电脑(手机)班的教室里,教师幸志容正通过图文、现场演示、手把手教学等方式授课,帮助
乐视(乐视)乐1S X500/双4G手机系统介绍评测乐视手机「乐视(乐视)乐1S X500/双4G手机系统介绍评测」
 EUI:更强调乐视生态的互联互通       接下来再看看系统方面,EUI这次也有较大的升级。从手机上来看,乐 1s所搭载的EUI 5.5体验版是基于Android 5.0定制的,它首次实现了意识流交互,实现内容桌
智能手表怎么和手机同步智能手表手机「智能手表怎么和手机同步」
智能手表与手机的同步是现代科技生活中的常见需求,它不仅能够提升用户的便利性,还能确保数据的准确性和一致性。以下是智能手表与手机同步的详细步骤和注意事项。首先,确保设备兼容性和软件版本是最基本的一步。智能手表和智能手机必须兼
小米(MI)手机 Redmi 红米 Note 13 Pro 5G手机 12GB+256GB 星沙白多少钱红米手机「小米(MI)手机 Redmi 红米 Note 13 Pro 5G手机 12GB+256
红米Note 13 Pro 采用了 6.67 英寸超细四窄边直屏,Pro+ 同款金刚骨骼架构,Pro+ 同款第二代 1.5K 高光护眼屏,具体参数为:2712×1220 OLED 柔性直屏,TCL 华星 C7 发光材料,支持 120Hz 刷新率,240Hz 触控采样率,2160Hz 瞬时触控采样率
百度浏览器:手机浏览器百度手机浏览器「百度浏览器:手机浏览器」
百度手机浏览器采用太空小熊形象,很是卡哇伊。基于webkit浏览器开发,在浏览速度、网站兼容性、稳定性上均有明显提升。能自动寻找网页中的主体内容,提供人性化的排版方式;首创底部无极滑动缩放,体验指尖在触摸屏上的酷炫操作效果,轻轻
小米15怎么截长屏?小米15截取长屏教程安卓手机怎么截屏「小米15怎么截长屏?小米15截取长屏教程」
在智能手机日益普及的今天,截屏功能已成为用户日常生活中不可或缺的一部分。而对于需要截取长页面内容的用户来说,小米15提供的截长屏功能无疑是一个极大的便利。以下将详细介绍如何在小米15上实现截长屏的操作。一、常规截图后的长屏截取
手机常用十大浏览器 UC浏览器上榜,百度浏览器位列第一手机浏览器「手机常用十大浏览器 UC浏览器上榜,百度浏览器位列第一」
  对于经常使用手机上网的人来说,手机浏览器成为了手机上必备的软件之一,但很多手机自带的浏览器都并不好用,所以大家都比较习惯在手机上安装一款第三方浏览器来使用,那么 目前人们最常用的手机浏览器有哪些呢?下面就让我们一起来看看
<第5期> 如何让胜诉权益兑现为“真金白银”?这些举措直面“执行难”
欢迎观临 屯检小屋~从推动实行审判权和执行权相分离的体制改革试点,到深化审判权和执行权分离改革,检察机关积极跟进国家执行体制改革——在高质效监督履职中做实“全程监督”司法是维护社会公平正义的最后一道防线,执行则是关系公平正
夏新 A07+夏新手机「夏新 A07+」
蓝牙 Bluetooth是一种短程无线电技术,其作用是简化小型网络设备(如移动PC,掌上电脑,手机)之间以及这些设备与Internet之间的通讯。 它还可以使以上设备与其他电脑间的数据同步变得简单轻松。Blueth最大的优点是使众多电信和电脑设备无
相关文章
推荐文章
发表评论
0评