React Native 实战:构建电商 App
通过电商 App 实战上手 React Native
疯狂紫萧
互联网难民,艰难生存。
展开
-
导读:为什么选择 React Native
在所有的技术选型之前都有一个为什么。为什么我选择了 React-Native?选择这个技术到底给我带来了什么样的技术福利?如果你正在考虑 React-Native,或者还在研究选择什么样的技术实现自家的 App,不妨看看这个课程,说不定你就有了不一样的感受。注:React-Native 以下简称 RN。优点选择 RN 之前我也看过了其他的几种技术,之前也使用过其他的技术做 App,...原创 2020-09-22 12:26:46 · 440 阅读 · 0 评论 -
第01课:项目初始化
知识点:快速创建 RN 项目添加使用路由功能不要在 RN 中使用的功能从这里开始,我们将一步一步的创建一个可以真正使用的 App:第一部分讲述开发一个 App 的大致过程,第二部分将开始优化性能、开发效率等,第三部分介绍添加热更新、支付、分享这些功能。大多数第三方组件可以很方便的 link 到项目里,部分需要手动导入甚至主动开发一些东西,这里也会在用到的时候讲出来。创建项目的前提条件...原创 2020-09-22 12:26:45 · 435 阅读 · 0 评论 -
第02课:封装自己的库
知识点:封装一个自己的日志,代替原生的 console封装一个自己的请求库,代替原生的 fetch自适应方法,兼容各种手机屏幕封装一个本地存储集成 Toast 弹出提示让 iOS 支持 HTTP 地址安卓需要证书才能编译在正式开始之前,我们先封装几个要用到的库。自定义本地日志自定义日志的一个好处就是省的每次都要手动注释 console,而且还可以同时将日志存在本地,或者发到...原创 2020-09-22 12:26:43 · 225 阅读 · 0 评论 -
第03课:首页模板和商品列表
知识点:给首页添加 Banner给首页添加运营模板获取接口的商品给顶部加一个搜索条从这篇开始正式案例的开发,Git 仓库的地址会放到下一篇中显示,需要的读者可以直接去 Git 上看每一次提交的代码。本文先从最早的代码形式开始一步一步的讲下去,开始开发的 App 会在某些情况下很卡,后面会将优化需要做的东西讲出来,这里先从简单的实现 App 界面开始讲,如果觉得手机反应慢,请看后面的...原创 2020-09-22 12:26:42 · 193 阅读 · 0 评论 -
第04课:组件和商品详情
知识点:使用路由跳转内页开发完整的商品详情页弹出选择数量前面的代码已经加入 Git 仓库,链接地址详见这里,将项目放在本地的同学也可以试着将代码放到仓库里,这个地方可以使用单独的分支合并到 master,也可以直接覆盖带 master 分支。为了能够更直观的看到每次提交的代码,我尽量把每一节的内容都做一次提交,备注也会写的非常清楚,另外我也会不定时的增加各种注释到代码里。一般情况只需...原创 2020-09-22 12:26:41 · 2363 阅读 · 0 评论 -
第05课:使用 WebView 和运营页通讯
知识点:创建一个浏览网页的组件注入 JS 并和网页通讯RN 默认提供了一个 WebView 组件,可以使用这个组件在 App 内打开一个网页,就像在微信里做的那样。但是电商 App 其实需要这个页面有很多和 App 的交互,比如打开商品详情页、加入购物车、分享等操作,这里就需要使用自定义 App 和 WebView 通讯协议的手段了。网页浏览页在 home 下新建一个 browse...原创 2020-09-22 12:26:39 · 175 阅读 · 0 评论 -
第06课:个人中心设置及 Debug 日志
知识点:改造顶部组件添加个人中心页添加设置页和日志页这一篇内容我们写一个简单的个人界面,由于接口不能用,这里就使用假的接口去做数据请求。设置 header旧的 header 默认有一个返回按钮,但是在个人中心是不需要的,我们要做一个兼容处理,将左侧的按钮隐藏掉,同时还添加了两处自定义样式的地方。接下来在个人中心页把这个组件引入并且设置好标题、右侧的齿轮等。整体是放入到一个滚...原创 2020-09-22 12:26:38 · 196 阅读 · 0 评论 -
第07课:添加自定义组件
知识点:开发一个分享组件。这节开始介绍怎样自定义我们自己的组件。分享组件我们单击分享的时候需要弹出一个单独的层,并且这一层里有几个可配置的显示的分享内容和渠道。这里利用 Modal 组件来实现,Modal 是一个单独的弹出,默认就遮盖在原有界面的上面,利用这点我们可以非常方便的做出一个遮罩。在 component 下创建一个新文件ShareView.js,使用一个完整的 view 来做背...原创 2020-09-22 12:26:36 · 269 阅读 · 0 评论 -
第08课:注册登录
这篇内容首先会教大家一个原生在启动 RN 的时候传参数的方法,该方法需要少量的更改原生代码即可,实现非常简单,接着会正式讲解怎么开发一个登录注册界面。初始化参数传递加入项目需要用到几个 App 一起上线,但是使用的是一套前端代码,这里就可以通过原生传入参数的方式改变前端的行为,这个方式使用到场景也不算少了,有需要的可以了解一下。``` javascrptimport { AppRegist...原创 2020-09-22 12:26:35 · 159 阅读 · 0 评论 -
第09课:全局状态管理购物车
知识点:添加 mbox。全局 mbox 组件执行添加命令npm i --save mobx mobx-react添加我们后面用到的组件。在之前的时候已经修改了 babelrc 了,这里提一下,修改配置文件 .babelrc让babelrc 支持 @ 修饰符。npm i babel-plugin-transform-decorators-legacy babel-preset-react-n...原创 2020-09-22 12:26:33 · 283 阅读 · 0 评论 -
第10课:实现购买(1)
知识点:App 添加微信支付添加订单 UI 和事件调起微信支付加入微信支付App 的微信支付只能在微信的开放平台申请,同时还要申请一次支付能力,微信的官方文档给出了微信支付的流程。App 的支付比较简单,支付的时候向服务器请求数据,此时服务器会拿到预支付 ID,然后 App 端通过这个 ID 和别的参数一起调起微信发起支付请求。我们使用 RN 的一个微信支付库,目前是 1.9....原创 2020-09-22 12:26:32 · 267 阅读 · 0 评论 -
第11课:实现购买(2)
知识点:地址列表地址编辑添加下单结果页地址列表页下单需要选择地址,这里我们再做一个地址列表页,点击选择地址的时候跳转到这个页面,选择完成之后回调选择好的地址结果。新建文件 /src/center/addressList.js,在文件中创建一个简单的列表,这里把列表和内容分开,使用几个空的方法替代。{/*地址列表*/} <FlatList ...原创 2020-09-22 12:26:30 · 208 阅读 · 0 评论 -
第12课:订单管理
知识点:订单列表订单详情添加订单列表订单列表是每个涉及到购买的 App 都会有的东西,这里就将开发一个功能比较全面的订单列表,订单一般涉及到几个状态的订单列表,订单的几个操作、状态变更,有的还会涉及到物流信息。首先要添加一个第三方的库 npm install --save react-native-scrollable-tab-view。在个人中心把订单的跳转加上去,这里使用的是之前...原创 2020-09-22 12:26:29 · 619 阅读 · 0 评论 -
第13课:添加优化动画
知识点:首页动画动画组件说明动画优化首页加入动画我们在首页加入这样一个动画,在默认情况下首页顶部是透明的,当内容往下滚动的时候,将顶部的背景颜色变成白色,搜索框颜色变成其他颜色。在首页的 state 中加入默认的位置值,这里使用动画库的单项值,设置默认值为 0。scrollTop: new Animated.Value(0)修改 FlatList 组件的滚动监听频率,这里的意...原创 2020-09-22 12:26:27 · 139 阅读 · 0 评论 -
第14课:优化 App,提升10倍效率
知识点优化渲染频率优化长列表渲染效率优化长列表图片缓存不知道各位在调试首页的时候有没有发现首页还是比较卡的,如果这个时候调起 RN 的调试窗体,就会发现在滑动的过程中 js 线程的帧率会很低。如果首页再加上一个 tab 组件的话,这个渲染的帧率会下降的更加厉害。这里就教大家怎么优化首页这里的性能,其他页比较简单,原理也都是一样,就不再赘述了。优化刷新次数这里有一个非常主要的优化逻...原创 2020-09-22 12:26:26 · 152 阅读 · 0 评论 -
第15课:使用 ESlint 规范化代码
知识点安装 ESlint配置规则兼容多数 IDE安装 ESlintnpm install -g eslinteslint --init根据提示安装选择需要的配置,这里我选择的是 json 格式的文件。最后就在根目录下生成.eslintrc.json。配置规则ESlint 是基于规则在检测代码的。env:你的脚本将要运行在什么环境中;globals:额外的全局变量;pa...原创 2020-09-22 12:26:24 · 507 阅读 · 0 评论 -
第16课:使用 TypeScript 编写代码
知识点:安装 TypeScript修改配置VSCode 自带 TypeParcel 自动处理Webpack 自动处理很多人已经在用 TypeScript 做开发了,这种方式确实有很大的优势,在开发和测试阶段给前端提供了非常大的助力,如果你还没有使用过,不妨试一试。安装 TypeScript在项目跟目录下运行 npm install -g typescript 即可安装好 Typ...原创 2020-09-22 12:26:23 · 350 阅读 · 0 评论 -
第17课:集成极光
知识点:集成极光集成友盟集成极光极光设置创建一个新的应用,名字可以随便。配置“推送设置”信息,这里 Android 输入框中填写我们自己的包名,默认是 com.;项目名称,这里的项目名称就是使用 RN 命令创建的时候输入的名称;iOS 的设置只需要上传证书,这里就不展示了。安装包极光有一个官方维护的 npm 包,单击这里查看 Github 地址。在项目根目录执行 npm ...原创 2020-09-22 12:26:22 · 226 阅读 · 0 评论 -
第18课:热更新
知识点:原理React-Native-Pushy自定义 Android 下载自定义 iOS 下载原理RN 的热更新非常简单,在 App 打开的时候检测 JS 文件是否需要升级,如果需要升级就下载最新的文件,然后使用新的 JS 启动 App 就可以达到更新最新的 UI 的目的。第三方热更新ReactNative 中文网推出了一个热更新的包,这个更新方式比较简单,所有新更新全部提...原创 2020-09-22 12:26:20 · 166 阅读 · 0 评论 -
第19课:总结
知识点:适配 iPhone X添加额外的线程缓存关于 Alert、Modal样式自定义组件适配 iPhone XRN 版本 0.52 之后提供了适配 iPhone X 的组件 SafeView,不过单独这个是不行的,还需要在 iOS 中修改配置,把视图从一个短小的区域拉伸到全屏的大小。这里通过修改设置打开默认的安全区域。由于之前使用的还是旧版的 RN,这里为了兼容旧的版...原创 2020-09-22 12:26:19 · 128 阅读 · 0 评论