React Native 开发技术周报第十八期-框架多角度对比, 技术文章, 优秀开源项目 (房产, 图片管理, B 站 APP,Starter-App 等)

2,016 阅读7分钟

尊重版权,未经授权不得转载出处:www.lcode.org

本周报来自江清清的技术专栏,欢迎微信关注公共号:codedev123.精彩技术文章第一时间推送!

说在前面的话:React Native开发技术周报,主要会涉及React Native最新资讯,React Native教程,技术开发文章,开源项目,工具,视频等等。今天是我们的第十八期,同时各位朋友有优秀的有关React Native技术开发文章可以发给我。

React Native交流8群:533435865

(一).资讯

1.来自阿里开发人员的Weex&React Native对比文章

对比文章非常不错,不过作者最后决定选择了Weex,嘿嘿,当然了我还是站在React Native阵营一边。最后也希望Weex以及React Native发展的都好。

2.再来一篇Weex & ReactNative & JSPatch对比文章

多种角度对比分析,大家有兴趣可以好好看看。

3.React Native v0.31.0-rc 发布,一起来看一下本次新版本有哪些更新的内容吧

(二).技术文章

1.基于Redux架构的单页应用开发总结

本项目开发基于 React + Redux + React-Route 框架,利用 webpack 进行模块化构建,前端编写语言是 JavaScript ES6,利用 babel进行转换。

2.React ES5 转化 ES6 对照表

 很多开发者反映,网上很多教程或者项目都是ES5写的,但是RN从0.18开始的代码已经支持ES6写法了,这边给大家带来ES5转化ES6对照表。

3.React Native发布APP之签名打包APK

用React Native开发好APP之后,如何将APP发布以供用户使用呢?一款APP的发布流程无外乎:签名打包—>发布到各store这两大步骤。本文将向大家分享如何签名打包一款React Native APP。

4.React Native热更新部署/热更新-CodePus…

React Native支持大家用React Native技术开发APP,并打包生成一个APP。在动态更新方面React Native只是提供了动态更新的基础,对将应用部署到哪里,如何进行动态更新并没有支持的那么完善。好在微软开发了CodePush,填补React Native 应用在动态更新方面的空白。CodePush 是微软提供的一套用于热更新 React Native 和 Cordova 应用的服务。下面将向大家分享如何使用CodePush实时更新你的应用。

5.React Native 开发小Tips-推荐

作者介绍了React Native开发中一些常用知识点,图文代码相结合,写的非常赞。

6.Talk about ReactNative Image Component

本文主要进行分析React Native中的Image模块是怎么样进行工作的。

7.实例解析 ES6 Proxy 使用场景

ES6 中的箭头函数、数组解构、rest 参数等特性一经实现就广为流传,但类似 Proxy 这样的特性却很少见到有开发者在使用,一方面在于浏览器的兼容性,另一方面也在于要想发挥这些特性的优势需要开发者深入地理解其使用场景。就我个人而言是非常喜欢 ES6 的 Proxy,因为它让我们以简洁易懂的方式控制了外部对对象的访问。在下文中,首先我会介绍 Proxy 的使用方式,然后列举具体实例解释 Proxy 的使用场景。

8.我的 React Native 技能树点亮计划 の React Native 从 ES5 到 ES6 的语法升级

9.[React Native Android 安利系列]原生小知识(创建activity并跳转)

React Native毕竟也要有一些原生的知识,这里我们先学习一下原生android创建activity,并跳转的过程。这有助于我们的前端开发同学,掌握一下android姿势。本实验的view采用react进行渲染,也为后续的学习做下铺垫。

10.[React Native Android 安利系列] 创建简单 RN 应用(以js角度来看RN)

11.react-native 给android端设置启动图

客户端全部使用 react-native , 相对之前的webapp 程序, 它的动画性能更好,更加贴近于原生的体验。 app功能开发基本完成后,发现一个很严重的问题,在app启动的时候会有很明显的白屏现象,不同的机型不同(cpu好的白屏时间短),大概1s到2s的时间。

为了解决这个问题,找了很多的资料,最终采用曲线救国方法。

12.ReactNative安卓首屏白屏优化

公司现有app中部分模块使用reactnative开发,在实施的过程中,rn良好的兼容性,极佳的加载、动画性能,提升了我们的开发、测试效率,提升了用户体验。但是,在android中,当点击某个rn模块的入口按钮,弹出rn的activity到rn的页面展现出来的过程中,会有很明显的白屏现象,不同的机型不同(cpu好的白屏时间短),大概1s到2s的时间。进行相关优化方法探索。

13.ReactNative增量升级方案

进行合理的热更新,增量升级方案探究,提升用户体验。

14.React Native之ViewPagerAndroid跳转页面问题

本文解决的问题为:①.怎么获取ViewPager控件,②.怎么定义函数,使用setPage(),去跳转页面,③.在使用了bind()的情况下,函数怎么传参。

15.React-Native生命周期详解

生命周期讲解的不错,RN的组件就是一个状态机。它接收两个输入参数:props和state,返回一个Virtual DOM。和Native一样,RN也为我们提供相应的钩子函数。RN的状态变化取决于props和state。

16.携程大招:Moles:携程基于React Native的跨平台开发框架

本文主要讲解三个点:①.Moles框架在ReactNative和我们主App的集成中起到了什么作用?②.Moles框架是如何打通Android、iOS、H5、SEO,让我们一套代码跑在多个平台上?③.Moles框架的组成以及原理是怎样的?

17.不再彷徨:完全弄懂JavaScript中的this(译文总结)

JavaScript 中的'this‘是动态的,它在函数运行时被确定而非在函数声明时被确定。所有的函数都可以调用'this',这无关于该函数是否属于某个对象。关于具体this的几种情况,赶紧打开文章查看吧。

(三).开源项目

1.React Native开源项目-图片展示客户端RN-BiZhi

基于ReactNative和Redux实现了展示图片类APP,持续更新,希望一起学习讨论.这个app 主要是研究Redux是的实现,并没有涉及太过过于复杂的UI,刚学习Redux的可以结合这个项目实践。使用的都是支持安卓和iOS的第三方开源!iOS跟安卓都能完美支持:最新页面,支持下拉刷新和上拖加载更多,分类页面,个页面跳转,性能优化

查看图片查看图片查看图片

2.React Native实例之房产搜索APP

本文为房产搜索客户端的Android版本的实现,效果很不错。

查看图片

3.仿照实现Bilibili客户端的React Native版本客户端

项目目前进度:实现控件跳转功能,activity之间的切换使用了事件监听器,非常缓慢,要改回传props。还在继续更新中。

查看图片查看图片

4.采用React Native开发的客户端-用于一步步学习开发项目非常有用

该用于初学者一步步学习React Native开发项目非常有用,涉及到Redux,侧滑菜单,导航器,自定义导航栏,数据持久化,数据验证等等很多功能。

查看图片

查看图片

(四).工具

1.用Sublime Text 作为React-Native开发IDE

我这边还一直使用Sublime进行开发React Native项目,给大家介绍如何安装最基本的插件进行RN项目开发。

关注我的订阅号(codedev123),每天推送分享移动开发技术(Android/iOS),React Native技术文章,项目管理,程序猿日常点滴以及精品技术资讯文章(欢迎关注,精彩第一时间推送)。

查看图片