如何使用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…