react native window环境搭建

作者: 李军leon | 来源:发表于2016-06-22 10:34 被阅读108次

先看一下环境搭建成功的样子吧。这是在安卓模拟器（ 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

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

Paste_Image.png

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

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

下载完成后如下图