愚人节技术不愚人~React Native开发技术周报Issue#05
说在前面的话:React Native开发技术周报,主要会涉及React Native最新资讯,技术开发文章,开源项目,工具,视频等等。今天是我们的第五期,同时各位朋友有优秀的有关React Native技术开发文章可以发给我。
React Native交流3群:496508742
(一).资讯
1.FaceBook发布适用于React Native开发的SDK包(目前只适配Android平台)
大家在使用React Native开发的过程中可以使用FaceBook SDK库,轻松集成社会化分享,登录,应用分析等API
React Native Desktop 可以让你用 React Native 技术构建 OS X 下的桌面应用程序。难道真心要准备通吃了?嘎嘎
3.React Native Horse Push热更新平台
来自深圳金马 root#68xg.com,强烈推荐的热更新开发平台。
(二).技术文章
1.饿了么在移动O2O应用React Native的技术实践
该React Native分享主要是基于之前做的饿了么商家招聘配送员和兼职平台的IOS应用的经验,目的是帮助对React Native感兴趣的同学了解React Native目前发展的情况,还有你如果想选择React Native进行移动端开发,这个过程中将会遇到哪些坑,迈过哪些坎儿。该文章中介绍了很多饿了么在这方面实践中遇到的很多问题以及解决方案,还是非常不错的~
话说如果需要了解React Native中方面运行生命周期以及相关属性,只需要看React相关即可,该文章很好的图文并茂的讲解了,相关声明周期内容以及props,state内容
看完上文还不过瘾?OK,再来一篇React Native组件生命周期总结的文章。
React Native从0.18版本开始,写法已经更新成了ES6规范了。所以该ES6相关特性还非常值得一看
看完本文你能学到什么? 当你第一部分和第二部分都学习完之后,你也许就会知道你为什么需要 React 以及 Redux 类似的 state container (状态管理器)。
上海蜂鸟团队,去返利网分享React Native实践内容
8.看Facebook是如何优化React Native性能
该文来自FaceBook官方博客,React Native 允许我们运用 React 和 Relay 提供的声明式的编程模型,写JavaScript来构建我们的 iOS 和 Android 的应用。这样的做法使得我们的代码更精简,更容易理解和阅读,这些代码还可以在多个平台共享。我们也可以加快迭代速度(因为在开发时不用等待漫长的编译。使用React Native,我们可以发布更快,打磨更多细节,让应用运行的更流畅。这其中优化性能是我们工作的一大重要部分,接下来讲述 Facebook 如何使应用性能足足提升两倍的故事~
9.探究 React Native 中 Props 驱动的 SVG 动画和 Value 驱动动画
React Native 作为一个复用前端思想的移动开发框架,并没有完整实现CSS,而是使用JavaScript来给应用添加样式。这是一个有争议的决定,可以参考这个幻灯片来了解 Facebook 做的理由。自然,在动画上,因为缺少大量的 CSS 属性,React Naive 中的动画均为 JavaScript 动画,即通过 JavaScript 代码控制图像的各种参数值的变化,从而产生时间轴上的动画效果。
10.初窥基于 react-art 库的 React Native SVG
art是一个旨在多浏览器兼容的Node style CommonJS模块。在它的基础上,Facebook又开发了react-art ,封装art,使之可以被react.js所使用,即实现了前端的svg库。然而,考虑到react.js的JSX语法,已经支持将<cirle> <svg>等等svg标签直接插入到dom中(当然此时使用的就不是react-art库了)此外还有HTML canvas的存在,因此,在前端上,react-art并非不可替代。
本文很好的讲解了多依赖管理的最佳实践
在实际开发过程中,经常需要同时运行和修改多个React Native工程,比如运行github上的开源项目以观察某种控件的实际效果。那么此时,各项目下的初始化(npm install)就会非常的痛苦,因为React Native的文件非常大,以0.17.0为例,安装后达到309MB。尽管,我们可以通过阿里npm等镜像站的方式加速下载的过程,但是下载后的进一步编译也非常地耗时。
12.React Native基础之Linking Libraries链接库配置-适配iOS开发
iOS React Native开发中,静态库配置详解方法
13.React native配置后,一直’Installing react-native package from npm…’,时间过程无反应解决方案
这个问题由于没有科学上网或者网络情况问题,经常出现。虽然一般来讲正常网络也需要几分钟或者十几分钟才能搞定。不过经过本文的方法讲解,很快哦~
14.React Native for Android 热部署图片自定义方案
热部署时,我们期望升级包中包含js代码与图片资源。bundle的热部署网上已经有两种方案了,一种是用反射,一种是利用RN自带函数,将bundle初始化时直接放到指定目录下,之后通过替换bundle文件实现代码热部署。我们希望图片也可以实现热部署,本文是一个比较简单的解决方案。
其中困扰很久的一个问题就是代码的分离:rn提供的打包机制将业务代码和RN的lib代码打包到一个文件里,固然没错;仔细看了下,我的业务文件压缩之后的只有370K左右,lib包大小就520K,每次更新代码都白白下载520k?下载速度影响不说,费轱辘呀~~
本文详细介绍了分离打包的一种解决方案。
16.干货:QQ控件ReactNative For Android 项目实战总结
Android Qzone 6.1版本在情侣空间涉水React Native,以动态插件方式将情侣空间进行React Native的改造。在情侣空间基础上,Android Qzone 6.2版本以融合的方式将话题圈进行React Native改造。本文主要讲述话题圈的开发改造流程,相关数据对比及性能优化。
17.进行CodePush进行React Native热更新技术文章(英文原版)
如果大家准备采用CodePush做热更新的话,可以关注一下这篇文章
最近ReactNative(以下简称RN)在前端的热度越来越高,不少同学开始在业务中尝试使用RN,这里着重介绍一下RN中动画的使用与实现原理。
19.知乎经典讨论帖:React Native有什么优势?能跟原生比么?
知乎上面,各大开发者,牛人对于React Native优势以及和原生开发的对比做了很热烈的讨论,相信看完会有一些体会的
该文章虽然已经写了很长时间了,不过也很好的介绍了React Native组件间通信的相关方法
本文为《React Native入门与实战》的作者之一,魅族高级研发经理魏晓军来为我们解析RN开发中的痛点。本文分享的是在环境搭建和扩展中会遇到的问题与解决方案。
当修改了代码或者图片的时候,只要app使用新的bundle文件和assets文件夹,就完成了一次在线升级。本文主要讲解增量升级的解决方案。
(三).开源项目
1.[译]React Native开源SQLite数据库组件(react-native-sqlite-storage)
该为进行移植SQLite,封装成适用于React Native Android、iOS平台插件
整体效果还可以的,不过暂时只是适配iOS平台
初学者从基础开始入门实战项目,把学习的组件知识点慢慢的串联在一起,还是非常有用的
4.React Native开源iOS图表组件(react-native-ios-charts)
该组件针对React Native进行封装,基于iOS Charts开源库重新封装,适配于iOS平台.该组件封装了一些常用的图表例如:Bar,Line,Scatter,Combined, Pie, Candle, Bubble等等
5.React Native开源图片选择器组件(react-native-android-imagepicker)
该组件进行封装系统图片的React Native图片选择器组件,当前只是适配Android平台
6.ReactNative重写的OSChina的git客户端
亲测,体验效果很不错
(四).工具
1.全新的开发React Native的DECO IDE工具
看官方介绍好像很牛逼的样子,不过现在还没有开放下载,大家可以先关注着吧
作为在墙内的童鞋们,进行安装npm的时候经常因为网络问题加载不成功,这边提供国内淘宝镜像,助大家一臂之力,速度非常的快哦~
要开发React Native For iOS一定要使用Mac OS X,一定要安装Xcode?No No,我来告诉你方法:使用Siphon工具,可以不需要安装Xcode IDE进行构建和发布React Native应用
尊重原创,未经授权不得转载:From 江清清的技术专栏(http://www.lcode.org) 侵权必究!