React Native环境配置之Windows版本搭建

接近年末了，回想这一年都作了啥，学习了啥，而后忽然发现，这一年买了很多书，看是看了，就没有完整看完的。悲催。
而后，最近项目也不是很紧了，因此抽空学习了H5。自学啃书仍是很无趣的，虽然Head First Html5 Programming（中文版）这本书讲的颇有意思，可是学习了大半本就想本身动手练练，因此得找个框架玩玩。
另外以前也就据说过React Native很火，火了半个地球了，并且它号称“Learn once，write anywhere”这句话在移动开发猿眼里意味着什么呢，我不说你估计也知道：“跨平台”。像我这种安卓猿写出来的代码能跑在IOS上，相信没有比这更开心的了。
并且，我在学习H5，那学习H5 Web开发怎么和个人安卓开发共存呢，React Native直接解决了个人问题：在运用H5开发的同时，还能够有效调用android原生态开发，直接二者兼具，既保留了android原生开发也运用了H5 web开发，perfect。因此框架也先不找了，直接坚决果断地投入到了React Native的学习当中。而后接下来的配置就让我陷入了苦逼的愤懑中，因此在配置好以后立马的记录下来，一是记录本身的学习通过，二是，给遇到一样麻烦的同窗提供一些借鉴。

由于我是在WIN10上搭建的，因此以此为版。

• 一、安装JDK

这个作java、android开发的都已经安装好了，没安装的能够自行安装，这里提示注意的地方：必定必定要在系统变量中配置JAVA_HOME: D:\guanmanman\Jdk8\jdk8，值是你的JDK安装目录，，请记得。

• 二、安装SDK

由于我是搞android开发的，因此这里是安装SDK，这里须要：
① 环境变量ANDROID_HOME：XXX
例 如：（ANDROID_HOME: D:\guanmanman\androidStudio\sdk）
② 环境变量PATH例如：
例如：（PATH：%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools）

• 三、下载SDK

React Native使用的是android版本是23.0.1，只支持这一个sdk版本，因此你必须先下载他的源码及工具，否则后面后报错，我就遇到了

若是你要是用的google 模拟器还要下载

ok 上面的基础东西下载好安装完，咱们接下来就正式开始咱们的React Native所须要工具下载和安装了：

1：node.js的下载和安装

下载地址：https://nodejs.org/en/，本人用的版本是， V6.9.2

安装则是选择好目录傻瓜式的安装便可。

2：Git的下载和安装

下载地址：https://git-for-windows.github.io/ 直接download便可

安装注意选择支持windows Command 和 windows ' default console window

ok 安装完上面两个工具咱们就能使用npm命令了，能够看下：

3：配置国内镜像

由于须要下载东西而遭到国内禁止，你懂得，因此得配置镜像，方便咱们下载：

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

命令行执行这两段配置命令。

4：下载 react-native-cli

这是react-native命令执行所必须不可缺乏的文件。

执行命令：npm install -g react-native-cli

这个根据网络快慢，下载时间有所不一样。

完成react-native-cli的下载，到这里咱们就完成了全部的基础配置了，也就是说前期工做已作完了，下面就能够建立项目进行开发了，是否是很开心，有点火烧眉毛呢，走着看吧，偷笑。

建立项目工程：

1：建立一个FirstRNProject工程

开始以前先建立一个专门用于保存React-Native工程项目的工做区：React-native_workSpace

而后执行命令：react-native init FirstRNProject 回车，init 表明建立一个工程。

当现实这个界面的时候就表明咱们的项目已建立完成，能够到你的工做区间去查看。

2：开启FirstRNProject工程

工程项目已创建完毕，而后咱们进入这个工程中，并执行输入react-native start，开启这个工程

3：检查FirstRNProject项目是否启动成功

在浏览器中访问http://localhost:8081/index.android.bundle?platform=android

当显示如上的脚本就表明已成功开启。

4：运行FirstRNProject项目

进入项目目录，输入react-native run-android 回车，

执行命令后会去下载相关的资源，这个过程仍是蛮长的，耐心等待吧。

而后下载完后就会安装工程在手机上了，你是否以为已完成了呢，我要告诉你想多了，来看看咱们碰到了那些坑吧。

遇坑则填：

1：sdk工具包

从标出来的地方能够看出，须要SDK工具版本是23.0.1，这个简单，开启androidstudio SDK Manager 进行下载吧，这也是在基础配置时我强调的必定要下载这个版本的缘由。

下载完在继续运行项目 react-native run-android

2：JAVA_HOME的配置

出现这个问题是由于个人环境变量path中直接用的是jdk的安装目录并无配置JAVA_HOME，这里直接添加一个JAVA_HOME的配置，在填入jdk的安装目录便可。

3 ：Unable to upload some APKs异常

这个问题是在5.0以上的真机中会出现 Unable to upload some APKs的问题，这时候咱们只须要把项目工程中的android目录中的build.gradle文件中的

dependencies {
        classpath 'com.android.tools.build:gradle:1.3.1'
    }

classpath 中的1.3.1给为1.2.3便可，还要设置android/gradle/wrapper/gradle-wrapper.properties文件的jar包

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

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

ok 改完再次执行项目：react-native run-android，它会从新下载zip包，又是N等。

在煎熬的等待中，终于下完了，进入真机或是模拟器中查看。

4 ：can't find variable:异常

这个须要你配置下真机IP和端口号，上下屡次摇晃手机，会出现一个菜单栏，点击Dev Settings后，点击Debug server host & port for device,设置IP和端口，端口号固定为8081,IP为你的主机ip地址。

ok，返回，再次上下摇晃手机，在菜单栏中，选择Reload JS，是否是感受OK了呢，你想多了。

5：SyntaxError异常

本觉得到这里就ok了，结果，运行一看，好吧，真不舍得我：

Strict mode does not allow function declarations in a lexically nested statement.

这个异常卡了我两天，若是你也遇到这个异常了，你就懂了个人无奈，由于这不是人为或是配置出了问题，你要是知道了答案确定十分的震惊，那是由于：这个异常是 React Native 版本自带的Bug，两天的郁闷到最后解决了仍是同样的无语。

这这里感谢React Native7群 （115487854）里的 晴朗 大神，他一言就解决了我两天的困惑。
“ react-native init 项目名 --version 0.38.0， 这是0.39的自身的问题，换0.38解决。 ”他这样说道。

针对这个异常，下面提供两种解决方案：

方法一：在新建项目时，使用命令react-native init 项目名 --version 0.38.0

方法二：打开工程中node_modules\react-native\Libraries\Core\InitializeCore.js文件找到 112 行，更改function handleError(e, isFatal) 为 var handleError = function(e, isFatal)而后在工程中执行 npm start --reset-cache从新启动

而后，就没有而后了。

以上就是最后，这个问题解决以后就正式的进入RN界面了。

OK，到这里就讲完了，我估计我所遇到的坑是比较多的了，但愿你能少于点坑，尤为是新人刚学习，信心遭受10000点暴击。

接下来就要正式的学习RN技术了，很期待，在学习中我也会时不时把本身的学习成果与你们分享，有兴趣的同窗一块儿努力吧。

更多资讯请关注微信平台，有博客更新会及时通知。爱学习爱技术。