react native window环境搭建

先看一下环境搭建成功的样子吧。这是在安卓模拟器( BlueStacks )中显示是这样的。


1.jpg

第一步:安装jdk

官网下载
这里根据自己电脑系统类型选择对应的jdk版本,我本机是64位的。所以选择64的。

2.jpg

下载完成后双击按照默认的安装即可。安装完成后需要将jdk添加到环境变量里面去。
如下图:

3.jpg
Paste_Image.png

然后测试jdk是否安装到环境变量中,在cmd 输入 java -version
下图这样就代表已经ok了。

Paste_Image.png

第二步:安装node

官网下载,左边是长期稳定版本,右边是node最新版本,这个版本添加了一些新特性,根据自己喜好下载就好了。

Paste_Image.png

下载完成后,按照默认的安装提示下一步就ok,安装时已经自动配置了环境变量,所以安装完成后,直接在命令行输入 node -v 查看一下就可以了

Paste_Image.png

第三步:安装Android studio

Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。
这个工具有点大,1个多G。如果觉得太大,也可以直接下载 Android SDK
官方是建议下载 studio工具的,因为是集成了 sdk 和模拟器省的你再去折腾了。

下载android-studio

Paste_Image.png

安装的过程请参考react中文网。安装完成后将sdk目录添加到环境变量中

Paste_Image.png
Paste_Image.png

同样将如下的目录也添加到环境变量中( 这里的环境变量添加在系统path下 )

Paste_Image.png
Paste_Image.png

在命令输入 android 弹出android sdk框 如下图:
确认红框都已安装

Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png

第四步:安装react-native命令行工具

命令行中输入
npm install -g react-native-cli 如果因为墙的原因建议通过
git clone https://github.com/facebook/react-native.git 下载到本地

第五步:创建项目

我当前是在F盘,所以我在F盘打开cmd窗口,然后再命令行中输入
react-native init reactApp

Paste_Image.png

这样就代表 我们正在从npm仓库去下载安装react-native。(这里要等很长时间。。)
因为墙的原因,导致我们下载会很慢,而且可能会出现问题,这里最好是将npm改成淘宝架设的镜像,加速下载(不能保证改了,就一定下载会快)
淘宝npm镜像:
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

下载完成后如下图

Paste_Image.png

然后在重新在这个目录下面打开一个cmd窗口运行packager服务 react-native start 这条命令是开启程序服务。

Paste_Image.png

看到了8081没,这条命令让程序开启了8081端口,可以用浏览器访问下这个地址http://localhost:8081/index.android.bundle?platform=android
看看是否可以看到打包后的脚本,如下图

Paste_Image.png

第六步:run android app

刚刚已经开启了 packager服务,所以运行上面的命令需要重新在目录下开启一个cmd窗口
reac-native run-android

Paste_Image.png

已经安装成功了,可以去我们的模拟器去看一下,我这里的模拟器是BlueStacks


Paste_Image.png

模拟器出现下图红屏,其实这样就已经代表我们把程序跑起来了。这里还需要在设置下

Paste_Image.png

如果是真机的话,需要摇晃下手机,Bluestacks模拟器按键盘上的菜单键,通常在右Ctrl的左边 或者左Windows键旁边

Paste_Image.png

选择 Dev Settings 出现下图

Paste_Image.png

然后再选择:Debug server host for device

Paste_Image.png

设置编译环境PC的IP地址,例如:192.168.1.158,去控制台 ipconfig看下本地的ip是多少,确保手机与编译环境在同一WIFI环境下(IP段相同)
然后我们重新运行下 react-native run-android 就可以了。

Paste_Image.png

建议去看下:http://blog.csdn.net/u011068702/article/details/49448043

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,395评论 25 707
  • 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人...
    珍此良辰阅读 2,347评论 3 9
  • 尽管在移动开发中,原生APP的开发成本很高,但现阶段基于原生开发仍然是必须的,因为Web的用户体验仍无法超越Nat...
    奔跑的大橙子阅读 5,386评论 0 11
  • 在这一章里面,我们将介绍一些简单的R软件运算,包括基本数字运算、向量运算与统计运算,让读者们对R软件的基本计算功能...
    jplee阅读 3,882评论 0 0
  • 有阳光的院子不能呆,不是不能呆,而是那里没有Wifi就无法看书和码字,只能坐屋里面享受阴冷,手指头也有点冻,也许这...
    小县城生活日记阅读 167评论 0 2