史上最详细Windows版本搭建安装React Native环境配置

说在前面的话:

感谢同事金晓冰倾情奉献本环境搭建教程

之前我们已经讲解了React Native的OS X系统的环境搭建以及配置,鉴于各大群里有很多人反应在Windows环境搭建出现各种问题,今天就特意更新一贴来说明。关于os x环境搭建以及react native入门学习资料请移步:http://www.lcode.org/react-native/

刚创建的React Native技术交流3群(496508742),欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

1、安装Java

这里需要注意对环境变量的设置,可以根据java -version来检测一下

2、安装SDK

这里需要注意设置环境变量ANDROID_HOME:Android SDK Manager的位置 例如:(ANDROID_HOME=> E:\Android\sdk)设置环境变量PATH:例如:(PATH=> %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools)

3、设置SDK

  • 打开Android SDK Manager。
  • 选中以下项目:
  • Android SDK Build-tools version 23.0.1
  • Android 6.0 (API 23)
  • Android Support Repository
  • Local Maven repository for Support Libraries

4、安装node

这货是基于js的,node.js轻量级的Web服务器,想要是React Native跑起来需要安装node, 如果没有安装node.js,先去官网安装node.js,最好是4.1以上版本

下载地址:https://nodejs.org/en/

下载node.js,找好对应的版本,然后去安装就可以了。
大家可以通过node -v的命令来测试NodeJS是否安装成功

5、安装git

安装React-native需要用到git,如果没有配置git,需要先下载对应的客户端,然后将git加入path环境变量即可
下载地址:https://git-for-windows.github.io/
安装:

6、安装react-native命令行工具react-native-cli

git配置完成后可以clone React-native-cli了,建议大家到将react-native-cli克隆到某个盘,不要在c盘直接clone

1)   在命令行中进入你希望RN安装的目录

2)   输入git clone https://github.com/facebook/react-native.git,等待下载

clone成功后执行:git clone -b master https://github.com/facebook/react-native.git

3)   进入刚刚目录下的react-native目录下的react-native-cli目录,输入npm install -g

安装好之后,可以命令行下就有react-native命令了

7、创建RN项目

进入你希望创建项目的目录后,输入react-native init AwesomeProject,等待一段时间(较慢)

成功后:

目录结构:

7、运行package

在命令行中进入项目目录,输入react-native start,等待一段时间:

这时候可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android,如果可以访问表示服务器端已经可以了。

 

7、运行项目

刚刚运行package的命令行不要关闭,重新启动一个新的命令行,

进入项目目录,输入react-native run-android

等待运行(如果是第一次运行,首先会下载gradle,时间较长)

运行成功后出现下图

第一次手机肯定报错

这时候我们摇一摇手机,点击Dev Settings后,点击Debug server host & port for device,设置IP和端口

“摇一摇”这个动作在模拟器可以用ctrl+M (Menu)来调出Dev setting菜单。

         

这里的IP是电脑的IP,不知道的可以在命令行中输入ipconfig进行查询,端口号固定8081

设置完成后,回到空白页面,再次摇一摇手机,选择Reload JS,程序就运行起来,出现Welcome to React Native!

        

 

今天我们主要讲解了React Native在Windows系统进行安装搭建环境。因为讲解起来和实际使用还是回遇到各种问题的。大家有问题可以加一下群React Native技术交流群(282693535)或者底下进行回复一下。

尊重原创,转载请注明:From Sky丶清(http://www.lcode.org/) 侵权必究!

 

引用原文:http://www.lcode.org/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86windows%E7%89%88%E6%9C%AC%E6%90%AD%E5%BB%BA%E5%AE%89%E8%A3%85react-native%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE/

 

写博客是为了记住自己容易忘记的东西,另外也是对自己工作的总结,文章可以转载,无需版权。希望尽自己的努力,做到更好,大家一起努力进步!

如果有什么问题,欢迎大家一起探讨,代码如有问题,欢迎各位大神指正!

转载于:https://www.cnblogs.com/summary-2017/p/7482959.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/540646.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Web浏览器端通过https 使用mqtt通讯

做的产品简介 这次需要做一个web端的上课平台,有音视频通讯,有白板(画板)功能,有文字通讯等。技术点 音视频通讯需要走Webrtc需要跟ios, android, windows, mac 客户端互联互通一般通讯通过mqtt协议MQTT简介 MQTT(Message Queuing…

vga显示模式_VGA的完整形式是什么?

vga显示模式VGA:视频图形阵列 (VGA: Video Graphics Array) VGA is an abbreviation of "Video Graphics Array". VGA是“视频图形阵列”的缩写 。 It is a three-row 15-pin DE-15 connector display hardware developed by IBM in 1987. It was first …

【iCore4 双核心板_FPGA】例程十一:FSMC总线通信实验——独立地址模式

实验原理: STM32F767上自带FMC控制器,本实验将通过FMC总线的地址独立模式实现STM32与FPGA 之间通信,FPGA内部建立RAM块,FPGA桥接STM32和RAM块,本实验通过FSMC总线从STM32向 RAM块中写入数据,然后读取RAM出来的数据进行…

http 412 precondition failed

2019独角兽企业重金招聘Python工程师标准>>> 今天在谷歌浏览器上刷新页面的时候,出现了 如下失败信息: HTTP 412 (Precondition Failed) 想想当时的动作是在发送ajax请求失败之后,再刷新,就会出现上面的失败问题。百度…

Python | Pyplot标签

There are the following types of labels, 标签有以下几种, 1)X轴贴标 (1) X-axis labelling) plt.xlabel(Number Line)# Default labellingplt.xlabel(Number Line, colorgreen)#Font colour Changedplt.xlabel(Number Line, colorGreen, fontsize15)#Font size …

MySQL Index Condition Pushdown

2019独角兽企业重金招聘Python工程师标准>>> 一、Index Condition Pushdown简介 ICP(index condition pushdown)是mysql利用索引(二级索引)元组和筛字段在索引中的where条件从表中提取数据记录的一种优化操作。ICP的思…

java.util (Collection接口和Map接口)

1:Collection和Map接口的几个主要继承和实现类 1.1 Collection接口 Collection是最基本的集合接口,一个Collection代表一组Object,即Collection的元素(Elements)。一些Collection允许相同的元素而另一些不行。一些能排…

asp.net MVC5为WebAPI添加命名空间的支持

前言 默认情况下,微软提供的MVC框架模板中,WebAPI路由是不支持Namespace参数的。这导致一些比较大型的项目,无法把WebApi分离到单独的类库中。 本文将提供解决该问题的方案。 微软官方曾经给出过一个关于WebAPI支持Namespace的扩展&#xff0…

python无符号转有符号_Python | 散布符号

python无符号转有符号There are multiple types of Scatter Symbols available in the matplotlib package and can be accessed through the command marker. In this article, we will show some examples of different marker types and also present a list containing all…

在eclipse中启动Tomcat访问localhost:8080失败项目添加进Tomcat在webapp中找不到

软件环境:Eclipse oxygen, Tomcat8.5 #在eclipse中启动Tomcat访问localhost:8080失败 在eclipse中配置tomcat后,打开tomcat后访问localhost:8080后无法出现登陆成功的界面,即无法出现下面的界面 在eclipse中的servers状态栏中双击tomcat&…

程序员简历工作模式_简历的完整形式是什么?

程序员简历工作模式简历:简历 (CV: Curriculum Vitae) The CV is an abbreviation of Curriculum Vitae. It is a written outline summary of a persons educational training and qualifications and his other experiences. It is an absolute profile of a cand…

ajax的访问 WebService 的方法

转自原文 ajax的访问 WebService 的方法 如果想用ajax进行访问 首先在web.config里进行设置 添加在 <webServices> <protocols> <add name "HttpPost" /> <add name "HttpGet" /> </protocols> </webServices> <s…

Hyperledger Fabric 1.0 从零开始(七)——启动Fabric多节点集群

5&#xff1a;启动Fabric多节点集群 5.1、启动orderer节点服务 上述操作完成后&#xff0c;此时各节点的compose配置文件及证书验证目录都已经准备完成&#xff0c;可以开始尝试启动多机Fabric集群。 首先启动orderer节点&#xff0c;切换至orderer.example.com服务器&#xff…

css中图片左右边距_CSS中的边距

css中图片左右边距CSS保证金属性 (CSS margin property) CSS Margins are used to space around any element, for this we use "margin" property in the CSS. CSS边距用于在任何元素之间留出空间&#xff0c;为此&#xff0c;我们在CSS中使用“ margin”属性 。 S…

js 实现网页显示倒计时

用 js 来实现网页显示倒计时效果 1 function checkTime( time ){2 var data new Data(); // 获取现在时间3 var nowData data.getTime(); // 转化成毫秒数4 var time ; // 结束的时间5 var t time - nowData ;6 var HH, mm , ss 0;7 var sta "…

ORACLE 物理读 逻辑读 一致性读 当前模式读总结浅析

在ORACLE数据库中有物理读&#xff08;Physical Reads&#xff09;、逻辑读&#xff08;Logical Reads&#xff09;、一致性读&#xff08;Consistant Get&#xff09;、当前模式读&#xff08;DB Block Gets&#xff09;等诸多概念&#xff0c;如果不理解或混淆这些概念的话&a…

arm tbh_TBH的完整形式是什么?

arm tbhTBH&#xff1a;说实话 (TBH: To Be Honest) TBH is an abbreviation of "To Be Honest". It is internet slang which generally used as an acronym or hashtag over the internet on social media networking sites like Facebook, Instagram, Twitter, Yo…

计数器数组_子数组计数

计数器数组Problem statement: 问题陈述&#xff1a; Given an array of N positive integers a1, a2, ..., an. The value of each contiguous subarray of a given array is the maximum element present in that subarray. The task is to return the number of subarrays…

MaxCompute 2.0—从ODPS到MaxCompute

从ODPS到MaxCompute-阿里大数据的进化之路是一个商用大数据系统发展史&#xff0c;一个商业大数据系统要解决的问题有可靠性&#xff0c;高性能&#xff0c;安全性等等六个方面。内部产品名ODPS的MaxCompute&#xff0c;是阿里巴巴内部发展的一个高效能、低成本&#xff0c;完全…

紫外线的形式是什么?

紫外线&#xff1a;紫外线 (UV: Ultraviolet) UV is an abbreviation of Ultraviolet. In RO water purifiers, the bacteria or germs which are present in the water cannot get killed by reverse osmosis process but this process can banish the dissolved solids and i…