hybrid app初体验，和react-native一块儿飞

第一次启动了react-native的示例，今天主要把其中遇到的坑与解决的办法分享给你们。若有疏漏、错误还望指正。

首先仍是要从hybrid app这个概念提及（若是对于这个过程不感兴趣的同窗，能够直接往下翻，从开始配置react-native看起）。hybrid app就是混合应用。从我我的的理解，本觉得就是在原生的app里面嵌入一些网页（webview）,直到最近去体会了一把ionic，以及react-native才感觉到了本身的肤浅，具体怎么肤浅了呢，一会再详细说，先来看看作一个hybrid app咱们该从何入手。

是的，假如我想作一个hybrid app，那么我要怎么作呢？从哪里下手呢？首先我想到了，网上可定有不少hybrid app的框架，我要弄个框架，体验一下（其实，博主以前还先去简单的了解了一下原生应用，下载了android studio试用了一下）。仍是百度一下：

除去前两个是百度推广的广告，阅读了后边几个连接之后，一个框架逐渐进入了咱们的视野：ionic framework。跟着这篇文档的入门教程：ionic2安装入门我初步的把ionic的web内容部署到了本地。这其中要***下载一些东东，还要安装python2（配置环境变量），速度也很慢。

到执行：

$ ionic serve

的时候，咱们在浏览器里访问127.0.0.1:8100就能够看到咱们的demo在浏览器里运行了：

是一个简单的tab页面，用鼠标点一点，挺流畅的，不卡。

这里让我产生了一些疑惑，hybrid应用不是混合应用么，怎么这个demo里，一行原生的代码也没有，就搭建出了一个简单的tab ui了呢？这里彻底用web前端的代码进行编写，就算后边用一些其余的方式去编译，封装进原生的应用，可它本质不仍是一个web app么。那么hybrid app究竟是什么呢？

带着这样的疑惑我又百度了一下hybrid app的百度百科，其中有一段讲分类，hybrid app能够分为：多View混合型、单View混合型、web主体型，等三种类型。那么ionic框架搭建的app就属于第三种web主体型了。

那么既然已经有了这么一个demo，我就想把它打包成一个apk，放到手机上跑一下，看看什么效果喽。根据文档说明，咱们须要首先给这个项目增长一个平台的支持：

ionic platform add android //博主是穷人用安卓机

就这样，博主的电脑开始了无尽的下载与编译过程，断断续续，重启了三次，耗时两天，仍是没有完成这个编译的过程，最后的画面停留在了下载某些jar包的过程当中（几个小时没动了，***后，重启两次也到这里不动了）：

ionic，咱们的缘分就到这里吧，借用宋冬野的一句歌词：爱上一匹野马，可个人家里没有草原。ionic你仍是在长城外边驰骋吧。

恰逢等待ionic下载的间隙，我又开始了react-native的学习。react-native是最近很火热的一套移动应用开发解决方案（我开始把它归到hybrid app里，但随着认识的加深，我发现它并非一般意义上的hybrid app，它使用js编写程序，解译后交给原生应用去渲染ui，或者直接调用原生代码，相比其余hybrid app在页面上进行混合，它更多的是在程序内部、编码方式上进行的混合），具体的介绍网上一大堆，你们本身看喽。

开始配置react-native

跟着这篇文档，开始安装咱们的react-native：react-native安装
Chocolatey这个你们能够不装的（老外用linux习惯了，对windows的手动下载安装配置很不屑，因此想出来搞了这个自动安装其余软件的软件，要***的），下边的内容能够手动安装就行了，该***的就***吧。不得不说，这篇文档，我给打100分，写的很是的详尽，比英文版的还要详尽，很是的实用。容易出问题的有几点：

1.React Native运行Android时提示要下载: gradle-2.4-all.zip ，下载失败，出现错误。这里有为先贤给填了坑：下载gradle-2.4-all.zip失败解决办法

2.在安装android studio后，能够打开Tools–>Android–>SDK Manager，勾选上Show Package Details，而后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1。（必须是这个版本）进行下载安装（避免出现这个错误：failed to find Build Tools revision 23.0.1）。

3.增长ANDROID_HOME环境变量，并在Path环境变量中增长：%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools两个配置(避免出现Could not get BatchedBridge Error关于这个错误还能够参考这个连接：Could not get BatchedBridge Error)。

配置好之后，经过usb链接上咱们的电脑和手机（安卓手机，启用开发者模式，启用usb调试，小米手机要额外增长配置：设置–>更多设置–>开发者选项–>（滑动到页面最底部）关闭“启用MIUI优化“–>完事会重启，这样作能够避免的问题：com.android.ddmlib.InstallException: Failed to establish session react-native），而后运行：

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

也是要等待一会，下载不少jar包什么的，相比ionic这个过程比较短，半个小时以内就搞定了，直到出现了：

看到你的手机上顺利的启动了这个demo：

好的，react-native已经正常的启动了，能够去学习react-native的语法与组件知识了，继续加油吧，同志们。