hybrid app初体验,和react-native一起飞

时间:2021-10-23 21:10:08

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

首先还是要从hybrid app这个概念说起(如果对于这个过程不感兴趣的同学,可以直接往下翻,从开始配置react-native看起)。hybrid app就是混合应用。从我个人的理解,本以为就是在原生的app里面嵌入一些网页(webview),直到最近去体会了一把ionic,以及react-native才感受到了自己的肤浅,具体怎么肤浅了呢,一会再详细说,先来看看做一个hybrid app我们该从何入手。

是的,假如我想做一个hybrid app,那么我要怎么做呢?从哪里下手呢?首先我想到了,网上可定有很多hybrid app的框架,我要弄个框架,体验一下(其实,博主之前还先去简单的了解了一下原生应用,下载了android studio试用了一下)。还是百度一下:
hybrid app初体验,和react-native一起飞

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

到执行:

$ ionic serve

的时候,我们在浏览器里访问127.0.0.1:8100就可以看到我们的demo在浏览器里运行了:
hybrid app初体验,和react-native一起飞
是一个简单的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包的过程中(几个小时没动了,*后,重启两次也到这里不动了):

hybrid app初体验,和react-native一起飞

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这个过程比较短,半个小时之内就搞定了,直到出现了:
hybrid app初体验,和react-native一起飞

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

hybrid app初体验,和react-native一起飞

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