如何使用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 通过图片列表和拍照选择图片

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

代码结构

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

预备知识和环境

工欲善其事必先利其器，以上我忽略了一个重要的部分，就是环境搭建的过程。这部分工作说起来不容小觑，没有这一步的胜利，后面所有的事情，都是白搭。关于环境，我们需要一个安卓的模拟器和打包和运营的 JAVA 环境，以及开发安卓APP相关版本的SDK包。具体环境的搭建详情，大家可以去

这里看，然后大家需要有react，webpack，redux的基础知识，以及对MVVM设计思想的初步了解，这样后续的事情，开展起来会顺利一些，不然就会一步三坑，看的一脸懵逼。

对了，开发安卓APP，大家一定要了解安卓各个版本在现在的安卓手机中使用的情况，比如说，3年前我们安卓的客户端，最低只支持安卓4.0的系统，然后向上兼容，如果你现在用的是安卓手机，你可以查看下你自己的机器系统版本是多少。一般来讲，安卓8.0系统是这一两年市面上常用机型配置的系统。我的项目当中，是基于安卓8.0系统进行开发的，所以说说，创建安卓虚拟机的时候，我会下载相关版本的SDK，明白了这些，你在开发时候下载SDK的时候，就可以有选择了，不用一股脑的把所有版本的SDK下载到本地，毫不夸张的说，所有安卓版本的SDK资源的大小应该不会小于50G，而且这些资源是从国外那边下载的，如果你真的不小心下载了所有的SDK包，我相信，你会哭的。

我配置的安卓模拟器是使用Android Studio中带的，下面是我配置的安卓模拟器的一些信息：

其他

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

代码地址： https://github.com/mmcai/reac...

dva.js地址： https://dvajs.com/

React-Native中文文档地址： https://reactnative.cn/

react-navigation地址： https://reactnavigation.org/d...