windows环境下搭建React-Native开发环境

前言:因为电脑是windows系统,为了开始React-Native的入坑之路,只能硬着头皮上了,搭建环境的路上走了很多的坑,现在我把我成功搭建的路子记录下来,希望帮助大家少走弯路,也让我以后再搭建的时候,有个记忆,现在正式开始

第一步:安装java sdk

(对了,这里还要安装node.js环境,因为要用到npm命令,node直接官网下载安装就好了,这里就不多做说明了)

下载地址 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html


下载的这个

解压之后点击里面安装程序,一直默认就好了,如果要改变安装路径一定要记得地址路径,我的是默认路径

安装好了之后,可以测试一下是否安装好   打开命令窗口终端(按住 windows+r ) 输入java -version 回车 如果出现下图就安装成功了,如果不行,重启一下电脑再试


出现这个就javasdk安装成功了

第二步:安装Android sdk

下载地址 https://dl.google.com/android/android-sdk_r24.4.1-windows.zip

下载之后解压到一个内存空间足够大的盘符(不能带有中文字符的文件路径),因为之后会下载很多的sdk文件,接口文件,大概三四十个g。

解压之后,双击SDK Manager.exe 



会出现一个框选择好下面这些要安装的,点击安装就好了


这里我安装了比较多的东西,主要是在第一次搭环境的时候,报了一些很莫名的错误,我也就在第二次搭建的时候选了比较多的扩张和接口之类的

第三步:配置环境变量(特别重要)

鼠标右键点击计算机,选择属性之后再按下图操作


然后在编辑系统变量的这个框里面的变量值中操作以下步骤

1.找到Android SDK 的目录的路径复制添加到path


2.找到android sdk 中 platform-tools文件的路径地址添加到pah,记住一定要打分号哦,跟前一个路径区分开

例如我的路径就是F:\android-sdk_r24.4.1-windows\android-sdk-windows\platform-tools

3.找到android sdk 中 tools文件的路径地址添加到pah   最后点击确定 确定 确定 就完事了

然后打开命令终端 (windows + r)  输入adb,测试一下,只要没有报错,就成功了

我们再把java sdk配置了,按下图操作


我因为第一次搭建失败了,查了很久了,我添加了一个Android sdk 的系统变量,第二次搭建就成功了,不知道是不是这个原因,最好添加一下吧,以防万一


Android SDK 默认的应该是在C:\Users\Administrator\AppData\Local\Android\Sdk 

这个地方我也有一个疑问,为什么我的android sdk压缩包是解压在F盘里的,C盘也会有一个sdk,这个地方的配置要用c盘的sdk,记住了

第四步:安装一个模拟器 我选择的是夜神模拟器

安装夜神模拟器,安装好之后,最好将分辨率调成手机端

第五步:利用npm(cnpm,yarn)安装react-native-cli (RN脚手架),并初始化项目

打开命令窗口,输入 npm install -g react-native-cli 回车一下就自行安装了



安装好之后,打开你需要将react-native项目放到哪一个文件下,按住shift键,点击鼠标右键选择 在此处打开命令窗口 

再输入命令    react-native init 项目名称     例如: react-native init firstdemo   回车等待初始化项目,完成后你就会看到一个名叫firstdemo的文件夹

之后在firstdemo项目目录中找到android目录,创建一个文件,如下图

然后内容为:sdk.dir=android sdk目录路径,如下图,记住,一定是双斜杠,


第六步:激动人心的连接模拟器,运行项目的时候到了

打开项目目录,按住shift键,鼠标右键点击,选择在此处打开命令窗口,输入react-native start  (启动项目服务进程),如下图

接下来,刚刚的命令窗口别关闭了,重新打开一个命令窗口,连接夜神模拟器

6.1.1 打开夜神模拟器

6.1.2 重新打开一个命令窗口,执行命令   adb connect 127.0.0.1:62001 以连接模拟器,(这个地方主义一下,端口号62001,是夜神模拟器默认的,如果你是其他的模拟器,记得查阅一下,默认端口号是多少)如下图:

6.1.3 再执行命令 react-native run-android ,这里需要说明一下,第一次启动这个命令的话,他要下载一些依赖的东西,最好是要有t z,不然会很慢,也可能会失败,这直接关系到最后能不能成功搭建环境,我这里是已经执行过一次这个命令了,如下图:


成功之后,你会看到你的模拟器自动打开了一个app,但是整个页面都是红色的,想报错一样,别慌张,还有最后一步

最后再运行命令   react-native run-android  模拟器会出现app界面,


好了,恭喜你,环境搭建好了,开始你的RN踩坑之路吧,

第一次写,写得不好,有些乱,大家见谅啊

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在学习React Native的过程中,相信对于一个App开发工程师,没有充分的学习过前端开发技术的同学来说,顺利...
    简而精阅读 1,808评论 1 0
  • 世事无真宰 有情忘我行 终身役役待 形化吹言生 物本无非是 荣华有辨惊 道枢环中累 莫若守元明
    摩羯星一号阅读 422评论 0 7
  • 下了一上午的雨,原本的出行计划只得取消。关在家里没有迈出房门一步的可以,显然开始焦躁了。 中午,可以提议吃意大利面...
    小米饭_9dbc阅读 621评论 0 0
  • 安装beautifulsoup4(bs4)的总流程如下: 1.Python的安装目录Python\Scripts下...
    启才阅读 2,362评论 0 0
  • 今天我又去了乐八小镇玩。我告诉你们了吧小镇是体验大人的职业的辛苦。那里有消防局,高尔夫球,宠物馆,中华美食,果汁…...
    卢思露阅读 2,722评论 0 0