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

栏目: 服务器 · 发布时间: 2个月前

来源: segmentfault.com

本文转载自:https://segmentfault.com/a/1190000019184997,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有。

从去年的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...


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

为你推荐:

相关软件推荐:

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

一个APP的诞生

一个APP的诞生

Carol 炒炒、刘焯琛 / 电子工业出版社 / 2016-7-1 / 79

在移动互联网高度发达的今天,一个个APP,成为我们通向网络世界的窗口。它的诞生流程,令不少对互联网世界产生幻想甚至试图投身其中的年轻人充满了好奇。 《一个APP 的诞生》就是这样一步一步拆分一个APP 的诞生过程。从前期市场调研,竞品分析开始,一直到设计规范,界面图标,设计基础,流程管理,开发实现,市场推广,服务设计,甚至跨界融合,都有陈述。 《一个APP 的诞生》被定义是一本教科书,......一起来看看 《一个APP的诞生》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具