安卓转战React-Native之windows下android环境搭建爬坑血泪史

Posted 2022-06-11 zy9011

前言

最近又有新的项目立项，所以好久都没有写博客了，然后都是利用闲暇时间来学习React-native。

由于安卓和ios的就业环境给移动端开发带来前所未有的冲击，于是乎很多伙伴们不得不另谋他路，然后现在比较火爆的Hybird和react-native也是对我们移动端的影响比较大，比如去面试会问你会nodej或者react不，前端工程师（js）转移动端的门槛变得很低，angularjs和reactjs都很不错，并且6月底阿里开源weex，估计很多人对weex还是特别期待的，唉，只能拿知识武装自己咯。

安卓开发者眼中的react-native

react-native是fackbook的f8峰会提出的，哈哈据我所知携程就已经使用了，效果还不错，据说是比angularjs还轻的东西，所以果断还是优先选择这个，什么ionic+corvoda+angularjs的模式实在玩不动，然后要去学的话真的是花费太多的时间，综合考虑还是react-native更具有现实意义。

坑逼的react-native for android

首先，不得不吐槽一下react-native团队，但是更多是觉得facebook的牛逼，f8短短8小时搞出来如此强大的东西，项目代码是在mac上开发，也是首先支持mac平台下开发的，windows平台是后来拓展的，特别是android是在ios出来以后好几月才搞的，所以搭建个开发环境一坑接一坑，在Windows下搭建React Native Android开发环境不可谓不艰辛，真的是苦了我这安卓dog。前前后后折腾了好几天，总算成功了，这里记录一下所遇到问题，希望能帮助想学习一下react-native 的android开发的后来者。

react说是比angular轻，然后看了一下演示效果确实是不错的，虽说是一个基于view来开发的东西，比微信的卡顿好多了，你说微信体验不怎么好的webapp也能火到爆，看来react-native是有发展的前景的，会react真的是进可攻退可守，但是react-native坑多无极限，所以对我来说也是一大考验。

links:

react-native官网：http://facebook.github.io/react-native/

react-native中文网:http://reactnative.cn/

react-native中文社区：http://bbs.reactnative.cn/

windows下react-native android环境搭建

对于react-native在windows下特别是安卓的环境配置总是会遇到这样或者那样的坑，但是那能怎么办：既然选择了就是泥沙俱下我们也要前行。

jdk和android sdk的配置

本人是Android原生开发，特么再熟悉不过了这一步对于我可以忽略，但是react或者ios转过来想学react-native android的还是有必要知道的。

官方文档是建议我们安装android studio2.0或以上版本然后sdk是去里面下载，本人开发是2.1.1的,然后要开发安卓必须安装jdk的java开发环境，个人推荐jdk1.8。

其实本人认为android studio什么的都是次要的，主要是一整套下来好配置点，没有照样还是能够开发发的呀，说这话的原因就是sdk离线下载快多了（http://www.androiddevtools.cn/资料很全的，你要下死丢丢也可以的啊），同志们下载好了记得配置环境变量很重要。
官方推荐需要安装的如下图：

非java开发的注意了，配好了如下图：

上图只能说明已经配置了，还得验证是否成功，看下图：

安装NodeJs（坑一）

官网下载地址：http://nodejs.cn/

很简单的一步，下载安装，环境都是自动配置好的，最后也是配置全局环境到path,我下载的是v5.8.0的版本。

cmd中运行如下命令，安装react-native工具：

npm install -g react-native-cli

我的没有问题，但是看见群里说有人出问题了（win7）
运行结果很奇怪，没有提示安装成功，也没有提示安装错误，然而运行react-native命令，提示命令不存在。

解决方案：安装v4.x.x低版本，不要安装v5.x.x高版本
公司电脑出现了，个人电脑是win10没有出现问题。

安装Git版本控制

git下载：https://git-scm.com/download/win
反正一路next好了，记得配置环境到path。

安装Python（坑二）

电脑上以前安装的Python3.5版本,也是使用美团的一键多渠道打包时装的，所以略过此步，直接创建项目

react-native init MyProject

报错提示，大概意思是python版本不对。

解决方案：安装2.7.x版本，版本不能高于3.0.0

这里提供下载地址：https://www.python.org/downloads/ ,装好后也配置环境到path。
看下版本如下图：

VCBuild.exe找不到，win7安装vs2015出错（坑三）

自认为该做的准备工作已经完成了，然后继续使用命令：

react-native init MyProject

错误信息：

MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”。要解决此问题，

1) 安装 .NET Framework 2.0 SDK；
2) 安装 Microsoft Visual Studio 2005；或
3) 如果将该组件安装到了 其他位置，请将其位置添加到系统 路径中。

吓尿宝宝了说出现Visual C++ 组件VCBuild.exe找不到 ，一看说是要装c++的环境，然后百度和google一搜说是：下载并安装Visual Studio 2013或2015。也可选择Windows SDK、cygwin或mingw等其他C++环境。

我一想以前装过cygwin进行ndk开发，居然没有找到VCBuild.exe我也是泪流满面，由于是在公司的电脑上，我就问了搞react-native的说是要装vs,我一看vs2015的下载网站特么安装包太大了但还是下了下来，安装的结果特么气死我了，如下图：

win7企业版在线升级win10失败（坑四，这个你们可能遇不到）

企业版还特么无法升级到win10，也有可能是c盘不足，硬件检验失败。
怀着操蛋的心情，把vs2015考进移动硬盘回家继续安装。

cl.exe退出，init失败（坑五）

本人自己电脑是win10，c盘160g直接安装在c盘省事，家里的网速真是龟速，艰苦的等待还是把vs2015安装完了，然后呢也就是安装的默认组件（没有想到这里居然也是个坑）。

继续使用命令：

react-native init MyProject

错误提示：

error MSB6006: “CL.exe”已退出，代码为 5。C:\\Program Files\\MSBuild\\Microsoft.Cpp\\v4.0\\Platforms\\Win32\\Microsoft.Cpp.Win32.Targets

这特么又头大了，又是一翻google得出的结论是没有装c++组件，我以为vs2015默认自带c++看来又是我错了，直接打开新建c++项目下载c++组件，我靠又是15g等着我，龟速的网装个这东西又是浪费3小时到12点。
欣慰的是：运行 命令 没有报错。

react-native init MyProject

开启服务（坑六，太多坑了）

初始化完成后，心里还是蛮高兴的，接着开启服务：

react-native start

太高兴了，竟然忘记去工程目录下去运行命令了，然后cd MyProject接着react-native start，

用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本。第一次访问通常需要十几秒，并且在packager的命令行可以看到进度条。迟迟看不到进度条，失败出现如下情况：

这个页面的说明android项目没有编译成功

解决方案：

需要删除项目(MyProject)下的这个路径下的文件：MyProject/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/.babelrc

如下图：

特么再次执行命令：react-native start，报如下图错：

尼玛，这不是超时吗

解决办法：

修改这个文件MyReact\\node_modules\\react-native\\packager\\react-packager\\src\\FileWatcher/index.js

把原来的
const MAX_WAIT_TIME = 25000;
修改为
const MAX_WAIT_TIME = 250000000;

接下来的结果很让人满意：

install apk出问题一（坑七）

执行安装命令：

react-native run-android 

出现错误：

problem occurred configuring project ‘:app’.
Could not resolve all dependencies for configuration ‘:app:_debugCompile’.
Could not find com.android.support:appcompat-v7:23.1.1.

解决方案

安装Android Support Repository与Android Support Library

install apk出问题一（坑八）

react-native run-android 

出现错误：说是gradle出错，然后apk都没有生成
google一搜说是gradle下载失败了或者不匹配gradle-2.4.0,其实有2种办法：

方法一：离线下载gradle-2.4.0的包（我机子上装的是2.10，所以我弃用这种）
方法二：手动把android目录下的build.gradle改成2.1.0,把local.propertices考进来里面配置自己sdk路径，再就是把自己安卓项目下的gradle文件夹替换掉。

果断安装到我的魅蓝note2手机上奇怪的是一片空白,google一搜都说是没有设置ip和端口，我特么按照解决方案使劲摇，结果就是不出来dev setting的dialog，然后手机只有一个home键，我没辙了。（特么到后来才知道有的手机默认不开启悬浮窗，开启的方法：【android手机浮动窗怎么开启】）

真机运行和调试项目（坑九）

到了这一步我可不能放弃，心里是那个气，果断换上我的夜神模拟器，哈哈还是不错有摇一摇功能，不过呢就是一片红。

有时候你运行 react-native run-android，发现并不能自动运行 dev server，你可以在当前项目目录中运行如下命令来手动启动 server：

$ react-native start
本地server指定的8081端口并没有成功接送数据
adb reverse tcp:8081 tcp:8081

可以在chrome浏览器中访问：http://localhost:8081/

在JS-SERVER上看到数据包过来

如果是5.0以下的系统 会爆出closed ， 建议使用wifi方式进行调试

$ adb reverse tcp:8081 tcp:8081
error: closed

解决方案

修改App项目IP配置

1、手机Wifi和PC网络保证在同一个局域网

2、cmd运行ipconfig查看PC本地IP地址

3、真机项目点击Menu键（一般最左边键），打开调试窗，选择配置项，点最后一项输入PC的IP地址和端口号8081，重新loadJS

摇出来的界面

设置ip和端口
操蛋的是，没有任何反映，google一搜居然说是服务断了。

运行期间react-native start不能断开（坑十）

当听到这个消息我特么也是醉了，start后还得另外开个控制台，一不小心就断开服务了。
只能重新开启服务：cd MyProject 然后在react-native start
再把模拟器（手机）reloadJs，神奇的一幕出现了。

看下图：

证明配置的ip和端口是完全正确的，接下来看手机（模拟器）

总结

用了几天的时间来配置环境，虽然没有占用公司的开发时间，然后也是为自己充电，看到群里面的同学也是各种配置问题在重复的问，搞得都没有人回答，因为总是出现各种各样的奇葩问题。

• 千万记得配置全局环境变量到path
• react-native 运行环境一定要装c++的环境，不一定需要装vs
• gradle 要千万注意否则可能安装apk失败
• python不是必要的，安装只是为了利于开发
• 服务千万不要停，这就是个坑，当然你打包把jsbudle放如assets目录下后就不需要启动服务了

主要的几个命令：

1、初始化项目 react-native init projectName

2、dos进入项目文件夹之后 react-native start，启动服务

3、另外开启一个DOS窗口，启动应用：react-native run-android

总体来说，按照网上的资料你是能一步一步解决问题的。我遇到的问题跟我之前安装的环境有问题，所以导致了一些问题，知识探索的过程总可能不是那么一翻风顺，祝大家不管怎样都能愉快的学习。

come on,enjoy it.

开发者涨薪指南 48位大咖的思考法则、工作方式、逻辑体系