react native window环境搭建

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


react native window环境搭建_第1张图片
1.jpg

第一步:安装jdk

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

react native window环境搭建_第2张图片
2.jpg

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

react native window环境搭建_第3张图片
3.jpg
react native window环境搭建_第4张图片
Paste_Image.png

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

react native window环境搭建_第5张图片
Paste_Image.png

第二步:安装node

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

react native window环境搭建_第6张图片
Paste_Image.png

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

react native window环境搭建_第7张图片
Paste_Image.png

第三步:安装Android studio

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

下载android-studio

react native window环境搭建_第8张图片
Paste_Image.png

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

react native window环境搭建_第9张图片
Paste_Image.png
react native window环境搭建_第10张图片
Paste_Image.png

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

react native window环境搭建_第11张图片
Paste_Image.png
react native window环境搭建_第12张图片
Paste_Image.png

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

react native window环境搭建_第13张图片
Paste_Image.png
react native window环境搭建_第14张图片
Paste_Image.png
react native window环境搭建_第15张图片
Paste_Image.png
react native window环境搭建_第16张图片
Paste_Image.png
react native window环境搭建_第17张图片
Paste_Image.png
react native window环境搭建_第18张图片
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

react native window环境搭建_第19张图片
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

下载完成后如下图

react native window环境搭建_第20张图片
Paste_Image.png

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

react native window环境搭建_第21张图片
Paste_Image.png

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

react native window环境搭建_第22张图片
Paste_Image.png

第六步:run android app

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

react native window环境搭建_第23张图片
Paste_Image.png

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


Paste_Image.png

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

react native window环境搭建_第24张图片
Paste_Image.png

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

react native window环境搭建_第25张图片
Paste_Image.png

选择 Dev Settings 出现下图

react native window环境搭建_第26张图片
Paste_Image.png

然后再选择:Debug server host for device

react native window环境搭建_第27张图片
Paste_Image.png

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

react native window环境搭建_第28张图片
Paste_Image.png

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

你可能感兴趣的:(react native window环境搭建)