怎样运用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…

    原文作者:mmcai
    原文地址: https://segmentfault.com/a/1190000019184997
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞