windows 7下React Native环境配置
React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术,它可以做到实时热更新 。FaceBook 也号称这们技术是 “Learn Once,Write AnyWhere”,学习成本只有一次,却完成了所有开发角色的统一。
这意味着:
1.app 将来都是可像网页一样热更新,随时发布。
2.对于一名开发人员,将再也没有前端,终端,后台的区分,他所关注的就是做一整套应用程序,人力将得到最大幅度的整合与释放。
3.代码复用将会是主旋律,因为是一种语言,大家重复造轮子的成本会越来越节省。
目前,React Native 也还是有一些缺点的,比如他的 sdk 组件包 size 还比较大,crash 还比较多,在 ios 上支持的内容已经相当不错,android 还属于初级阶段。
为了学习React Native,有些人建议买个mac,可以没有钱呀!只能在windows上进行环境配置,来感受一下了。
1、安装Java
这里需要注意对环境变量的设置,可以根据java -version来检测一下。

设置环境变量JAVA_HOME,否则后续编译的时候可能会报出找不到tool.jar的错误。

在path中添加%JAVA_HOME%/bin,如下图所示:

2、安装和配置SDK
这里需要注意设置环境变量ANDROID_HOME:Android SDK Manager的位置
例如:(ANDROID_HOME=> D:\Android\sdk)设置环境变量path:例如:(path=> %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools)

- 打开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
想要是React Native跑起来需要安装node, 如果没有安装node.js,先去官网安装node.js, 大家可以通过node -v的命令来测试NodeJS是否安装成功

5、安装git
安装React-native需要用到git,如果没有配置git,需要先下载对应的客户端,然后将git加入path环境变量即可。
6、安装react-native命令行工具react-native-cli
git配置完成后可以clone React-native-cli了,建议大家到将react-native-cli克隆到某个盘,不要在c盘直接clone
1) 在命令行中进入你希望react-native安装的目录
2) 输入git clone https://github.com/facebook/react-native.git,等待下载。
这种从国外下载资源的时候,可能 由于被墙而失败,所以有的时候需要FQ进行下载。
3) 进入刚刚目录下的react-native目录下的react-native-cli目录,输入npm install -g

7、创建React Native项目
进入创建项目的目录后,输入react-native init AwesomeProject,等待一段时间(较慢)

成功后,目录结构如下:

7、运行服务端服务
在命令行中进入项目目录,输入react-native start,等待一段时间。启动成功后,可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android,如果可以访问表示服务器端启动成功。

7、运行项目
刚刚运行服务端的命令行不要关闭,重新启动一个新的命令行,
进入项目目录,输入react-native run-android启动android项目
在此命令之前,请确保安卓模拟器已经配置好并启动。


可以用命令adb devices来查看当前可用的设备列表

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

一般第一次部署的时候,由于IP地址和端口号为配置正确,都会出现错误,模拟器可以用ctrl+M (Menu)来调出Dev setting菜单
真实设备摇一摇手机,点击Dev Settings后,点击Debug server host & port for device,设置IP和端口。这里的IP地址就是电脑的IP。



用react-native start --port 9988 可以修改默认的8081端口
windows 7下React Native环境配置的更多相关文章
- 史上最全Windows版本搭建安装React Native环境配置
史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...
- 史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用
史上最详细Windows版本搭建安装React Native环境配置 2016/01/29 | React Native技术文章 | Sky丶清| 95条评论 | 33530 views ...
- React Native环境配置
React Native环境配置 史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有 ...
- React Native环境配置之Windows版本搭建
接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的.悲催. 然后,最近项目也不是很紧了,所以抽空学习了H5.自学啃书还是很无趣的,虽然Head Fir ...
- react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置
参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup. ...
- 史上最详细Windows版本搭建安装React Native环境配置
说在前面的话: 感谢同事金晓冰倾情奉献本环境搭建教程 之前我们已经讲解了React Native的OS X系统的环境搭建以及配置,鉴于各大群里有很多人反应在Windows环境搭建出现各种问题,今天就特 ...
- Windows版本搭建安装React Native环境配置及相关问题
此文档整理参考地址: http://www.lcode.org/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86windows%E7%89%88%E6%9C% ...
- Windows版本搭建安装React Native环境配置
1 安装Chocolatey 打开cmd黑窗口 @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-obje ...
- React Native环境配置、初始化项目、打包安装到手机,以及开发小知识
1.前言 环境:Win10 + Android 已经在Windows电脑上安装好 Node(v14+).Git.Yarn. JDK(v11) javac -version javac 11.0.15. ...
随机推荐
- 敏捷转型历程 - Sprint3 Grooming
我: Tech Leader 团队:团队成员分布在两个城市,我所在的城市包括我有4个成员,另外一个城市包括SM有7个成员.另外由于我们的BA离职了,我暂代IT 的PO 职位.PM和我在一个城市,但他不 ...
- JavaWeb的国际化
国际化 1.国际化开发概述 1.1.软件的国际化 软件开发时,要使它能同时应对世界不同地区和国家的方法,并针对不同地区和国家的方法,提供相应的,符合来访者阅读习惯的页面或数据 国际化简称:i18n : ...
- Disque:Redis之父新开源的分布式内存作业队列
Disque是Redis之父Salvatore Sanfilippo新开源的一个分布式内存消息代理.它适应于"Redis作为作业队列"的场景,但采用了一种专用.独立.可扩展且具有容 ...
- 【腾讯优测干货分享】安卓专项测试之GPU测试探索
本文来自于Dev Club 开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57c7ffdc0569a1191bce8a63 作者:章未哲——腾讯SNG质 ...
- Hadoop2.2.0安装过程记录
1 安装环境1.1 客户端1.2 服务端1.3 安装准备 2 操作系统安装2.1.1 BIOS打开虚拟化支持2.1.2 关闭防火墙2.1.3 安装 ...
- JVM虚拟机结构
JVM的主要结构如下图所示,图片引用自舒の随想日记. 方法区和堆由所有线程共享,其他区域都是线程私有的 程序计数器(Program Counter Register) 类似于PC寄存器,是一块较小的内 ...
- 浏览器怎么添加 Axure扩展程序
步骤 本文以强大如斯的谷歌浏览器来说明,怎么查看Axure原型文件,怎么添加Axure RP扩展程序.Axure RP生成的原型文件,一般都是可以用浏览器打开的, 如:一般都有index.star ...
- ES 学习总结
ES 总结: es 是基于lucene的, 是java 实现的, 很多概念和lucene是相同的 索引-- 对应数据库的表,mongoDB中的集合 文档,由字段组成, 一个字段可以出现多次. 字段,其 ...
- 【译】Unity3D Shader 新手教程(5/6) —— Bumped Diffuse Shader
本文为翻译,附上原文链接. 转载请注明出处--polobymulberry-博客园. 动机 如果你满足以下条件,我建议你阅读这篇教程: 你想学习片段着色器(Fragment Shader). 你想实现 ...
- 2、摘要函数——MD2/MD4/MD5数字签名
摘要是用来防止数据被私自改动的方法,其中用到的函数叫做摘要函数.这些函数的输入可以是任意大小的信息,但是输出是大小固定的摘要.摘要有个重要的特性:如果改变了输入信息的任何内容,即使改变一位,输出也将发 ...