注:本篇文章属于转载 转载的文章,一切纠纷与本文无关

Window系统下搭建RN开发环境

RN开发所需要的工具：

一、Node.js

官网地址：https://nodejs.org/en/

打开后选择下载，我下载的是Current版本的

官网地址：https://nodejs.org/en/

打开后选择下载，我下载的是Current版本的

我下载的是Current版本，具体两者什么区别，我也不知道哦

下载完成后是一个node-v7.8.0-x64.msi文件，然后双击一路狂next即可

如果验证nodeJS工作是否正常,cmd 输入node -v 和 npm -v查看版本号

image

此时注意下环境变量，发现默认的已经添加了node path路径了，所以node 和 npm 命令才有效

图片.png

设置npm镜像，复制以下两行命令粘贴执行

npm config set registry

https://registry.npm.taobao.org

npm config set disturl

https://npm.taobao.org/dist

<a name="t3" style="box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;"></a>二、React Native

官网地址：https://github.com/facebook/react-native

打开后，download下载

图片.png

然后解压，目录结构如下

图片.png

在当前目录也就是下载到本地的react-native目录中，执行npm install -g react-native-cli，完成后如下图

这一步我安装的时候有些坑,记住一定要cd到react-native-cli这个目录才能成功安装React命令！！！

图片.png

校验是否成功，执行react-native -v命令查看

图片.png

<a name="t4" style="box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;"></a>三、初始化Demo并运行

开发环境基本搞定，至于JDK，SDK这些，都是必要的。

开始初始化项目，在一个空的文件夹下，执行react-native init one_demo命令后，经过漫长的等待，最后来到下图

不知道我的npm是不是被墙了,反正觉得不好用,这一步老是失败,如果这一步你出现了很多Error信息并且没有成功生成React目录的话,那么既可以采取下面这种方式去初始化React项目

调用 npm install -g yarn 安装 yarn包管理工具,然后再调用react-native init one_demo就可以正常生成目录拉

图片.png

项目初始化成功，进入到项目的根目录下开始运行项目 react-native run-android，中间需要翻墙，这里推荐使用免费的VPN工具

蓝灯

https://www.getlantern.org/

这个过程第一次会非常缓慢，也有可能出错，出错的地方无非就是sdk找不到，或者support 版本过低等。直到，看到build successful说明一切ok了。

图片.png

此时手机显示会是这个样子的

图片.png

那是因为我们的包服务器没打开，我们在初始化项目的根目录下执行 npm start

图片.png

然后在手机上按menu实体按键，此时弹出选择提示，有些手机是摇晃激活的

图片.png

选择dev settings，然后在debug server host & port for device 设置我们电脑本机的代理

图片.png

完成后，点击确定，然后在按menu实体按键，选择Reload，我们注意观察 刚才启动的包服务器的命令窗口已经开始在响应了。

图片.png

执行到了100%，我们的手机界面也成功显示出来

图片.png

好了，window下RN开发环境到此搭建完毕。