如何使用ReactNative快速开发一个APP

从去年的10月份开始,我的大部分工作重心从传统的前端开发转向了使用ReactNative开发APP,在这个过程当中,走过了不少弯路,也遇到了一些技术相关的问题,但总算没有辜负那些对我信任的人。经历过痛苦和无助,终于坚持了下来,一个月的时间把产品成功部署上线了。想想这些日子其中不乏有一些经验,先愿意拿出来和大家交流交流,其中难免有一些不是最优的方法和方案,还望大家多提意见。

背景

一开始为了快速的开展业务,我们决定把产品先通过H5的形式进行线上运行,终于在两周的高效率工作情况下,我们产品上线了,但相比较APP,使用H5开发,不能满足我们的产品需要,随后就决定开发APP,但公司这个时候没有APP开发的相关人员,我只好硬着头皮上了,通过学习ReactNative相关的基本知识,然后不断的向身边一些做过RN开发的朋友取经,使用RN开发APP的工作,才慢慢的走上正轨,起初,我打算IOS和安卓都用RN开发,但考虑到工作量和日常的一些事情,我一个人难免会耽误大家的进度。鉴于我平常使用的是window系统,就决定我只开发安卓客户端,IOS客户端我们又招了一个小伙伴。这样我的工作就有APP开发,H5开发,管理后台相关的支持等事情需要做。

基础工作

开发APP的基础框架包,一开始使用create-react-app,再后来使用react-native-dva-starter作为基础的框架包。相比较create-react-app这个基础的框架,后者增加了dva和react-navigation模块,其中dva是一个基于redux和redux-saga的数据流方案,主要是为了管理我们项目当中的数据的,其中包括,数据请求,数据模型,数据存储,react-navigation是一套路由系统,可以帮助我们实现页面跳转,并管理历史跳转数据。数据的请求我们可以使用HTML5提供的fetch,也可以像通常开发H5页面那样使用Axios,毕竟请求数据这件事情,只不过是为了发起一个ajax请求,然后把数据拿回来就好,使用什么不太紧要,我在项目当中实际使用Axios来完成这部分的事情。准备好了上面相关的内容之后,我们最最基础的代码内容算是弄好了,后面就可以通过一些第三方的npm包,为你的项目加砖添瓦了;以下是我的项目当中用到的第三方包列表:

  • react-native-splash-screen 开屏广告
  • react-native-swiper 图片轮播
  • react-native-pdf 支持显示PDF文件
  • react-native-picker 列表选择
  • react-native-root-tips toast提示框
  • react-native-dialog dialog模态框
  • react-native-checkbox-component checkbox组件
  • react-native-linear-gradient 实现渐变
  • react-native-version-number APP版本号管理
  • react-native-device-info 获取设备信息
  • react-native-contacts-wrapper-pro 获取用户联系人
  • react-native-code-push APP热更新
  • react-native-image-picker 通过图片列表和拍照选择图片

以上不是全部,有些可能没有列出来,一个包的需不需要,往往是根据我们的需求来的,如果可以,你可以添加其他的包进来。

代码结构

如何使用ReactNative快速开发一个APP

以上是不完全的目录结构,具体的内容,各位看官可以去我的代码仓库中去下载,查看详细的内容。我会在文章的底部附上代码相关的地址。

预备知识和环境

工欲善其事必先利其器,以上我忽略了一个重要的部分,就是环境搭建的过程。这部分工作说起来不容小觑,没有这一步的胜利,后面所有的事情,都是白搭。关于环境,我们需要一个安卓的模拟器和打包和运营的JAVA环境,以及开发安卓APP相关版本的SDK包。具体环境的搭建详情,大家可以去
这里看,然后大家需要有react,webpack,redux的基础知识,以及对MVVM设计思想的初步了解,这样后续的事情,开展起来会顺利一些,不然就会一步三坑,看的一脸懵逼。
对了,开发安卓APP,大家一定要了解安卓各个版本在现在的安卓手机中使用的情况,比如说,3年前我们安卓的客户端,最低只支持安卓4.0的系统,然后向上兼容,如果你现在用的是安卓手机,你可以查看下你自己的机器系统版本是多少。一般来讲,安卓8.0系统是这一两年市面上常用机型配置的系统。我的项目当中,是基于安卓8.0系统进行开发的,所以说说,创建安卓虚拟机的时候,我会下载相关版本的SDK,明白了这些,你在开发时候下载SDK的时候,就可以有选择了,不用一股脑的把所有版本的SDK下载到本地,毫不夸张的说,所有安卓版本的SDK资源的大小应该不会小于50G,而且这些资源是从国外那边下载的,如果你真的不小心下载了所有的SDK包,我相信,你会哭的。
我配置的安卓模拟器是使用Android Studio中带的,下面是我配置的安卓模拟器的一些信息:
如何使用ReactNative快速开发一个APP

其他

开发的过程当中,难免会遇到一些问题,建议大家多看看API文档,如果是第三方包,多看看他们的案例代码信息,如果实在解决不了,您也可以私聊我,我们一起探讨下。以下是APP产品的一些截图
如何使用ReactNative快速开发一个APP

代码地址:https://github.com/mmcai/reac...
dva.js地址:https://dvajs.com/
React-Native中文文档地址:https://reactnative.cn/
react-navigation地址:https://reactnavigation.org/d...