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

Posted 2020-09-17 谢维开

接近年底了，回想这一年都做了啥，学习了啥，然后突然发现，这一年买了不少书，看是看了，就没有完整看完的。悲催。
然后，最近项目也不是很紧了，所以抽空学习了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上搭建的，所以以此为版。

• 1、安装JDK

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

• 2、安装SDK

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

• 3、下载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技术了，很期待，在学习中我也会时不时把自己的学习成果与大家分享，有兴趣的同学一起努力吧。

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