Windows10下搭建ReactNative开发环境

前言

最近花了很多时间在研究ReactNative，在网上参考了很多的资料如何来搭建ReactNative开发环境，但是总是无法在windows10系统下搭建成功，几经周折，最后终于完成了环境的搭建，因此记录下来

需要安装的软件

1、nodejs
2、git
3、android sdk
4、Windows10 SDK （这个是很多教程上没有的环境，因此可能会报很多莫名奇妙的编译错误）
5、C++ builder tools

根据上面的软件要求我们一步步的来进行ReactNative开发环境的搭建

安装nodejs

版本：官网最新stable版本，我这里是4.45

下载链接：https://nodejs.org/dist/v4.4.5/node-v4.4.5-x64.msi

安装步骤：根据msi文件的安装提示一步步的完成

运行：在cmd中输入node -v，可以看到如下的效果

安装git

版本：官网最新版本

下载地址：https://git-scm.com/download/win

安装步骤：根据下载的exe文件一步步的提示进行安装完成

运行：在cmd中输入git，可以看到如下的效果

安装android sdk

第一步，软件下载

版本：我这里采用的android studio的sdk，所以我本机直接安装的androidStudio，具体的可以根据实际情况去下载SDK

Android SDK下载地址：http://tools.android-studio.org/index.php/sdk

第二步、安装

安装过程和普通的exe差不多

第三步、设置环境变量

a、打开环境变量位置：控制面板 -》系统和安装 -》系统 -》高级系统设置，最后调出的环境变量的配置位置，如下图



b、设置环境变量

新建环境变量:ANDROID_HOME，变量的值填入sdk的路径，我这里是D:\AndroidStudio\sdk\，如下图所示





修改path变量，并将android sdk的tools工具增加到PATH变量中，最后结果如下图



c、检测android sdk ，在cmd下输入adb如果有如下的提示，说明环境变量配置成功

安装Windows10 SDK

下载地址：http://download.microsoft.com/download/2/1/2/2122BA8F-7EA6-4784-9195-A8CFB7E7388E/StandaloneSDK/sdksetup.exe

安装步骤：根据sdk的安装提示一步步的进行安装

安装C++ builder Tools

下载链接：http://download.microsoft.com/download/5/d/6/5d6a1865-11ff-41f8-8af6-60e92d9bbd0b/visualcppbuildtools_full.exe

安装步骤：根据sdk的安装提示一步步的进行安装

ReactNative实践

至此，所有的必要的软件都已经安装完毕，接下来要进行下一步的操作，如何来创建一个ReactNative

第一步，安装React-native-cli

因为受国内网络的限制，这里设置npm的镜像地址为淘宝，操作步骤如下

a、设置register

依次在cmd中执行如下命令

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

b、全局React-native-cli

在cmd中执行如下命令：

npm install -g react-native-cli

这个过程需要较长的时间，等待命令执行完毕

第二步、创建一个新的项目

在cmd下执行命令

npm init wenda

这个过程需要等待很长的时间，如果在init的过程中报错，请仔细核对上面必须要安装的软件是否成功安装,成功之后会出现如下界面

第三步、运行项目

a、启动js bundle服务

进入到MyProject所在的目录，在cmd下执行命令,效果图如下图所示

react-native start

b、启动应用

重新打开一个cmd，切换到MyProject目录，然后执行如下命令，等待一段时间的编译和打包，成功之后会出现如下界面，这里注意的是，你首先需要将手机连接到电脑上，否则可能会出现cannot find device

react-native run-android

注意：


编译的过程由于会下载gradle，所以过程会比较慢，这里更快的解决方法是采用离线的方式，

1、先到http://pan.baidu.com/s/1c0dcgfe，下载gradle的离线包

2、然后更改gradle配置文件

路径为：d/develop/languages/ReactNative/wenda/android/gradle/wrapper/gradle-wrapper.properties中的这段代码

distributionUrl= https://services.gradle.org/distributions/gradle-2.4-all.zip

改为

distributionUrl=file:///d:/develop/languages/ReactNative/wenda/gradle-2.4-all.zip

c、运行效果

第一次启动肯定会是如下的结果，原因是因为手机无法找到电脑上的代理



接下来使用ipconfig命令查看下电脑的ip地址，并将该地址设置为手机的代理，步骤如下

1）摇一摇手机，出现菜单，如下面左边的图所示，点击DevSetting设置，出现设置的界面，如下面右边的图所示


   


2）设置代理为本机对应的ip，如我本机的地址192.168.3.51，端口为8081，则下面的地址为192.168.3.51:8080



3）回退到空白的界面，接着摇一摇手机出现菜单，如下图左边所示，先择Reload JS，然后会出现成功的页面，如下图右边所示


  


4）到此所有的步骤均已经完成

安装过程中遇到的问题

参考链接

windows安装ReactNative环境

http://www.tuicool.com/articles/26byiuZ

解决node-gyp编译错误的问题

https://github.com/nodejs/node-gyp/issues/802

​