React Native在特赞的应用与实践
基于React技术栈构建开发前端项目,并使用React Native开发特赞移动APP
目前正在使用Node.js开发和维护特赞服务网关,希望Node.js能够在更轻量级的微服务架构中发挥重要作用
课程介绍:
React Native在特赞的应用与实践
课程摘要:
APP开发技术的选型
React Native开发过程中的主要问题
异常监控、热更新与RN性能优化
距离过年还有一个月不到,产品突然提出一个需求说,咱们要不做一个IOS应用吧,快过年了,给设计师一个新礼物吧。当时我的内心其它是拒绝的,于是我面带微笑着说:“好啊,我们尽量吧。。。。。。”
IOS工程师是不指望了。
于是,开始调研苹果应用的审核发布流程,热更新,具体的实现细节。为了赶上苹果的审核,两周的时候,我们发布了我们的第一个初始版本,在接下来的2周时间,我们完成了剩余所有功能的开发,并通过热更新发布到了线上。我们用了不到1个月的时间完成了特赞原生IOS的开发
使用React的话,我们是通过声明式的方式定义组件,而后通过虚拟DOM在浏览器环境下,进行UI的渲染和数据的加载。
而React的使用已经应用到了PC页面,移动页面,甚至服务端渲染等场景下。
随着React Native的推出,我们甚至通过React更是拥有了开发IOS和Android应用的能力。记住,这是真的,真的原生应用!!
Learn once,write anywhere. React官方的slogan
为什么选择RN:
首先呢,刚才提到过,通过 RN开发的应用,只要优化得当,是可以获得无限接近Native应用的交互操作体验的,所以说,手感非常丝滑,让人爱不释手
然后就是,RN开发出来的应用,它的功能和性能都是很不错的。
还有一点,对前端开发人员来说,真的是一个福音,那就是,RN可以直接通过Chrome进行调试,分分钟让你欲罢不能
另一方面,因为我们团队本身就是React技术栈,所以选择RN是一个很自然的过程。适应的过程也非常的短暂。最后,也是影响我们抉择的一个因素就是,RN除了可以像WEB一样进行开发,还可以拥有WEB一样的发布能力,只要通过热更新就可以简单做到。
使用前:调试、路由、数据管理、组件选型
使用中:动画、缓存、手势、支付
使用后:推送、异常监控、热更新、性能优化
本次的分享,主要围绕RN开发前后我们涉及的方方面面进行探讨。包括开发前我们会重点考虑的调试、路由、数据管理组件选型等问题;
开发过程中,我们则是要解决动画、缓存、手势、支付等问题
业务功能开发完毕之后,则要关注消息推送、异常监控、热更新、性能优化这样更加重要的问题
调试过程中遇到的坑:
坑1:必须在第一次reload之后 才能进行断点调试
坑2:必须把chrome调试控制台所在 tab放在最前面,否则操作模拟器内的界面将会严重卡顿
当调试工作能够通过Chrome的DevTools进行时,一切都似乎变得简单起来了。
我们可以进行熟悉的断点调试,变量审查;
我们还可以结合React、Redux的Chrome插件直观的查看组件结构和整个工程的数据变化
路由:push-->project-->chatDetail-->chatList-->home(Top)-->pop
比如最初的我们处于home页,接着我们push到对话列表页,再push到对话详情、项目列表页,然后我们又可以pop回圣诞详情页。
当然实际情况可以还要复杂一点,比如往回跳多个页面,跳回到指定页面等等。这一切都是一个堆栈来进行操作的
所以这一切我们都可以用类似下面的一千代码来实现:
this.props.navigator.push({
name:'chat',
params:{
projectId,designerId,projectName
}
});//是的,开发使用的是JS,底层仍然是基于具体的平台
通过Navigator组件对象的引用,我们可以跳转到对话列表(chat)页面,与此同时,我们带上项目ID,设计师ID等参数,这些参数我们在chat页面中很容易获得。
React在WEB上可以通过React-router来管理路由,不过在RN中,路由管理变得更简单。通过Navigatro(或者最新的react-navigation)组件,我们把所有的Scene、场景、或者页面通过一个堆栈管理起来,页面的操作就是简单的出栈入栈操作
Redux+AysncStorage
React Native在特赞的应用与实践的更多相关文章
- 基于React Native的跨三端应用架构实践
作者|陈子涵 编辑|覃云 “一次编写, 到处运行”(Write once, run anywhere ) 是很多前端团队孜孜以求的目标.实现这个目标,不但能以最快的速度,将应用推广到各个渠道,而且还能 ...
- React Native常用组件Image使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native之FlexBox介绍和使用
# 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...
- [转] 学习React Native必看的几个开源项目
http://www.lcode.org/study-react-native-opensource-one/ http://gold.xitu.io/entry/575f498c128fe10057 ...
- 移动应用跨平台框架江湖将现终结者?速来参拜来自Facebook的React Native
React Native使用初探 February 06 2015 Facebook让所有React Conf的参与人员都可以初尝React Native的源码---一个编写原生移动应用的方法.该方法 ...
- 学习React Native必看的几个开源项目
学习React native ,分享几个不错的开源项目,相信你学完之后,一定会有所收获.如果还没有了解RN的同学们可以参考手把手教你React Native 实战之开山篇<一> 1.Fac ...
- [RN] React Native中使用 react-native-scrollable-tab-view嵌套在ScrollView里,导致 子内容 在安卓上无法显示
React Native中使用 react-native-scrollable-tab-view嵌套在ScrollView里,导致 子内容 在安卓上无法显示 问题: 0.9.0 或 0.8.0 版本的 ...
- React Native 性能优化指南【全网最全,值得收藏】
2020 年谈 React Native,在日新月异的前端圈,可能算比较另类了.文章动笔之前我也犹豫过,但是想到写技术文章又不是赶时髦,啥新潮写啥,所以还是动笔写了这篇 React Native 性能 ...
- 【独家】React Native 版本升级指南
前言 React Native 作为一款跨端框架,有一个最让人头疼的问题,那就是版本更新.尤其是遇到大版本更新,JavaScript.iOS 和 Android 三端的配置构建文件都有非常大的变动,有 ...
随机推荐
- C语言关键字static的绝妙用途
为什么要说static妙,它确实是妙,在软件开发或者单片机开发过程中,大家总以为static就是一个静态变量,在变量类型的前面加上就自动清0了,还有就是加上static关键字的,不管是变量还是关键字, ...
- Android BLE与终端通信(二)——Android Bluetooth基础科普以及搜索蓝牙设备显示列表
Android BLE与终端通信(二)--Android Bluetooth基础搜索蓝牙设备显示列表 摘要 第一篇算是个热身,这一片开始来写些硬菜了,这篇就是实际和蓝牙打交道了,所以要用到真机调试哟, ...
- web报表工具FineReport常用函数的用法总结(日期和时间函数)
web报表工具FineReport常用函数的用法总结(日期和时间函数) 说明:凡函数中以日期作为参数因子的,其中日期的形式都必须是yy/mm/dd.而且必须用英文环境下双引号(" " ...
- 面向对象(this的问题二)
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...
- ORACLE分页SQL语句(转载)
1.根据ROWID来分select * from t_xiaoxi where rowid in(select rid from (select rownum rn,rid from(select r ...
- JavaScript中对象数组 根据某个属性值 然后push到新的数组
原文链接 https://segmentfault.com/q/1010000010075035 将下列对象数组中,工资大于1w的员工,增加到对象数组 WanSalary中 var BaiduUser ...
- WSL与Windows交互实践
1. WSL是什么 2. WSL新特性 3. WSL管理配置 4. WSL交互 5. 解决方案 * 5.1 使用别名 * 5.2 多复制一份 * 5.3 重定向 * 5.4 symlink 6 ...
- Angular教程测试运行过程中产生的一些问题
主要问题就是最后一个HTTP Demo需要angular-in-memory-web-api模块: TS2307:Cannot find module 'angular-in-memory-web-a ...
- 关于期权池Option Pools与Vesting:码农创业防身必备法器
之前又看到饿了么创始人团队纠纷的几篇文章,参考了百科.wiki.36Kr.虎嗅.知乎以及邵亦波老师的文章,对之前一直感兴趣的期权汇编初略总结了下 ,仍觉粗糙,对一些具体操作还是不甚了了,不过感觉在中国 ...
- ruby the diference between gets and gets.chomp()
ruby the diference between gets and gets.chomp() 二者都是可以获取用户命令行输入的函数,但是 gets获取内容后,后面 附带了 多余的换行符号'\n'; ...