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

前言

最近又有新的项目立项,所以好久都没有写博客了,然后都是利用闲暇时间来学习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手机浮动窗怎么开启】

真机运行和调试项目(坑九)

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

解决方案

修改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.

时间: 2024-12-11 11:58:11

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

[转帖]cocos2d-x 3.0rc开发指南:Windows下Android环境搭建

原文请看:http://blog.csdn.net/linzhengqun/article/details/21663341 鲜红字体请注意:文中红色字体乃是本文博主阳光下的蒲公英添加.红色字体部分造成的问题,本博主一概不负任何责任.其他字体的责任由原文作者负责.(本文博主是不是特别无节操了呢....O(∩_∩)O哈哈哈~) 安装工具 1. 配置JDK JDK下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.ht

cocos2d-x_ Windows下Android环境搭建

在Windows环境下编译cocos2d-x-3.0 Android-NDK编译:cocos2d-x(二) Mac 下搭建:http://www.cocoachina.com/bbs/read.php?tid=199238 1. 安装配置开发环境 安装JDK  jdk-8u5-windows-i586 安装ant  apache-ant-1.9.4-bin.zip 安装SDK  adt-bundle-windows-x86-20140321 安装NDK  android-ndk-r9d-wind

React Native - 1 Windows下的环境配置(Windows+Android)

参考:https://facebook.github.io/react-native/docs/getting-started.html(要FQ) 网站上建议使用Chocolatey去配环境,不过这个站点在国内访问太慢了,所以我们单独安装下面的软件就好了. 1. 安装Node.js: https://nodejs.org/en/,下载安装最新版本(推荐LTS版本) 确认Node.js是否安装成功,cmd里输入:node -v (退出是按两次 ctrl+c) 2. 安装python2,https:

cocos2d-x 3.0rc开发指南:Windows下Android环境搭建

安装工具 1. 配置JDK JDK下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html 本人的系统是Win7 64位版,但安装的是JDK7.Windows X86版. 如果安装文件夹在:C:\Program Files (x86)\Java\jdk1.7.0_21:当然也能够是其它地方 环境变量设置: JAVA_HOME=C:\Program Files (x86)\Java\jdk1.7.0_21 CLA

android学习第1篇:windows下android环境搭建:adt-bundle

安卓学习开始了! 在windows上搭建安卓开发环境,看似简单,其实问题很多,我整整搭建了5天才搞定,当然,也是因为工作有些忙的原因,时间不太多,OK,本篇教程,我会将我遇到的所有问题都写上,希望看到这篇博客的朋友,不会犯同样的错误. 一.搭建JAVA开发环境 1.基本概念 如果你会JAVA,那直接略过就行. http://blog.csdn.net/alspwx/article/details/20799017 这篇博客,是我以前转载的别人的,主要是介绍:J2EE\J2ME\JVM\JRE\J

Windows下Android环境搭建

一.  JDK下载配置 直接百度,很简单. 二.android JDK下载配置 1.进入下载官网(需要FQ):https://developer.android.com/studio/index.html android studio是android开发IDE,自带了JDK,但是不是最新的,如果要用其他IDE,我们只需下载JDK就行. 页面下拉图示的地方可以下载对应的版本.按照提示下载. 2.下载完之后解压,通过SDK Manager.exe管理,其他文件夹是用来放SDK Manager.exe

【REACT NATIVE 跨平台应用开发】环境搭建问题记录&&XCODE7模拟器上COMMAND+R失效的几种替换方法

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2147.html React Native 这里不多介绍,其实就是个跨平台开发原生应用的开源引擎. 更详细的介绍,大家可以搜索"facebook react native" 或 "taobao react native" 附上 React Native 官方网站:http://react

Cocos2d-x win7下 android环境搭建

原地址:http://blog.csdn.net/xingboss3/article/details/8267512/ 综合了以下三篇 http://www.cnblogs.com/lhming/archive/2012/06/27/2566460.html http://www.cnblogs.com/lhming/archive/2012/06/27/2566467.html http://www.douban.com/note/229610750/ 1.安装Java JDK 下载地址htt

Cocos2d-x 3.1.1 学习日志11--一Windows下Android环境搭建(一定对你有用的!!)

安装步骤::(多么痛的领悟!!) 1. 配置JDK JDK下载地址: 设置环境变量: JAVA_HOME=C:\Program Files (x86)\Java\jdk1.7.0_21 CLASSPATH=.;%JAVA_HOME%\lib; Path增加%JAVA_HOME%\bin; 设置完后打开cmd,输入java -version 如果出现下面提示,表明环境变量设置成功: C:\Users\arlin>java -version java version "1.7.0_21&quo