React Native开发技术周报Issue#12-技术干货More More More
尊重版权,未经授权不得转载出处:http://www.lcode.org
本周报来自江清清的技术专栏,欢迎微信关注公共号:codedev123.精彩技术文章第一时间推送!
说在前面的话:React Native开发技术周报,主要会涉及React Native最新资讯,React Native教程,技术开发文章,开源项目,工具,视频等等。今天是我们的第十二期,同时各位朋友有优秀的有关React Native技术开发文章可以发给我。
React Native交流6群:426762904
(一).资讯
1.Deco:The best IDE for building React Native apps is now free and open source.
React Native IDE终于发布了,不过当前支持Mac端iOS开发哦,Linux以及Windows版本不知道什么发布哦,工具虽然可以加快开发效率,不过当前Deco还是有一些细节问题优化的。http://pan.baidu.com/s/1bpNrzFT 密码: qnb9
炳根大神的又一大招放出来了~
好吧下面来一波Realm React Native应用详解专题~
4.移动端数据库新王者-Realm React Native版本应用详解之抛砖引玉入坑篇(一)
5.移动端数据库新王者-Realm React Native版本应用详解之略陈固陋爬坡篇(二)
6.移动端数据库新王者-Realm React Native版本应用详解之略陈固陋爬坡篇续1(三)
(二).技术文章
1.React Native进阶之原生模块封装特性篇详解-适配iOS开发
该文章主要讲解原生模块的一些特性例如:回调方法函数,Promises,多线程,常量设置,事件发送到JavaScript,监听生命周期事件,获取封装Swift原生模块等相关的特性。
ReactNative目前更多的是用于在原生App中加入一个新的模块。那么,此时如果这个ReactNative模块需要使用到一些原生模块的功能,比如访问平台的API;或者你要复用现成的Java代码;又或者使用Java已经成熟的第三方Library,那么这篇文章会一步步告诉你,如何去调用一个已经封装好的Android原生代码。
上一篇文章React Native系列文章(七)原生模块(上)中我们介绍了原生模块的基本用法,本篇文章将介绍原生模块的高级用法—ReactNative与原生模块的通信方式。
4.React Native 热加载(Hot Reload)原理简介-中文版本
官方博客,热加载原理介绍,下面一片是原文,喜欢都英文的大家可以读一下哈
官方热加载原文版本
6.用 React 整合 LogEntries JavaScript 库
众所周知,React.js已经被证实是众多JavaScript架构中的有力竞争者。按理说,它已经成为web开发人员应当考虑的,在当前及未来项目中使用的少数项目库之一。而了解它如何与技术栈中的其他库相集成,是非常重要的一环。如果你目前正在使用LogEntries,或者考虑使用LogEntries,那懂得如何集成React.js和LogEntries就非常关键。本文将阐明他们间的互操作性。
在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 star 数达 42000 +,超过了 jquery 的 39000+,也即将超过前几年比较火的angular 1 的 49000+;redux 的 star 数也要接近 20000,可见大家对其的热情程度,究竟是什么魔力让大家为之疯狂呢?让我们上车,亲自体验一波试试~~本文章偏向于讲解redux流程。宅印前端基于 react + redux 的模式开发,我们指定了一套分工明确的并行开发流程。下面通过一个 “苹果篮子” 实例,来看看整个应用开发流程。
在ES5中,变量声明只有var和function以及隐式声明三种,在ES6中则增加了let,const,import和class四种,以下来介绍着七种变量的声明。
函数式编程是一种编程范式,它将电脑运算视为数学上的函数计算,并且避免使用程序状态以及可变数据。函数式编程强调程序执行的结果而非执行的过程,倡导利用若干简单的执行单元让计算结果不断渐进,逐层推导复杂的运算,而不是设计一个复杂的执行过程。今天我试图用js去梳理函数式编程相关的一些知识。文中代码风格采用Standard,使用ES6语法。
10.深入浅出 React Native:使用 JavaScript 构建原生应用
11.react native debugger 远程调试redux工具
react native是现在比较火的App开发技术。使用react native开发的朋友一般也会使用到facebook提出的Flux概念框架,而redux框架是使用的比较多的。redux的一大原则是单一数据源,只存在唯一的state树,以前由于工具的缺失,react native查看不了state,刚使用redux的时候按照文档安装了chrome扩展,也查看不了state树,每次都要自己打印出来看,比较麻烦。想来都说的是web的工具,今天找到了react-native的工具,可以远程调试redux。
12.我们如何使用React Native和Parse开发Out the Window
本文是介绍工程师如果使用React Native和Parse技术进行开发Out the Window应用的
13.重写SHOULDCOMPONENTUPDATE指定组件是否进行重绘
14.统一ANDROID与IOS两个平台的程序入口&&区分平台的组件简介
15.Pepperoni是React Native的入门起步套件
Pepperoni是使用React Native开发针对安卓和iOS的入门套件工具,使用这套起步项目模板,你就节省了繁琐的项目准备设置,也不要每个项目重复进行设置。它包含了React Native生态系统的很多工具。是一个应用模板Blueprint蓝图。
16.安卓转战React-Native之windows下android环境搭建爬坑血泪史
Webpack虽好,但对于一个React新手来讲,如何开始是个很大的挑战。我就遇到很多初试身手的开发者在学习React的康庄大道上被难倒而功亏一篑,原因就是陷入了Webpack和配置的坑里。为证明你可以专注学习React而无需ES2015、JSX编译以及Webpack的帮助,我撸了一个样例库,你可以在GitHub得到它。这个仓库使用Gulp来合并、压缩你的文件,无需ES2015或是JSX。要是你想专注于React,余事勿扰,那就不妨一试。
AJAX半遮半掩的底层API是饱受诟病的一件事情. XMLHttpRequest 并不是专为Ajax而设计的. 虽然各种框架对XHR 的封装已经足够好用, 但我们可以做得更好。更好用的API是 fetch 。下面简单介绍 window.fetch 方法, 在最新版的 Firefox 和 Chrome 中已经提供支持。
20.React Native Module for CodePush 入门
21.React Native Module for CodePush 实战
本文主要在源码上分析了Java组件如何最终能够调用JSX的方法细节。首先上结论,RN完全没有使用HTML/WebView,而是通过基于C的javascript解释器(or VM)与native代码相互调用的.
23.[深入ReactNative]第一篇 通讯及消息循环代码剖析
本篇详细分析React Native 中 Native和JS的互相调用的原理解析。
24.React-Native-APP-With-Testing
本文章介绍在开发react-native app的过程中如何去组建一套比较容易理解和使用的测试框架进行UT和component UT,这里做一下整理。
这篇博客稍微讲解下React-Native中的布局。比较简单。RN的而布局是用css中的flexbox布局,所以布局起来与Android传统的布局样式有点像。接下来赶紧去学习吧,作为React Native的开发基础非常有必要哦
今天就从源码的角度来分析下React-Native底层的通信机制。了解下底层是如何通信的对开发也有所好处。
27.React-Native系列Android——Javascript文件加载过程分析
React-Native应用程序的内容是由JavaScript语言开发的,而Android或者iOS手机系统只是一个容器和各类服务提供者。众所周知,Javascript是一门解释型脚本语言,对于浏览器而言,浏览器负责解释和执行Javascript脚本。而对于手机系统而言,同样是负责解释和执行Javascript脚本,当然其核心都是使用的webkit内核。
浏览器获取Javascript脚本,主要通过网络下载 + 本地缓存的机制,达到效率的最大化。当然,移动应用也不例外,但不同的是移动应用可以将Javascript脚本直接打包在应用程序内,免去网络下载这个极其不稳定的过程,这样可以达到加载效率和性能流畅的最大化,也就是风靡一时Hybrid技术,而这一点浏览器是做不到的。无论使用网络下载还是本地文件,最终都是要加载JS文件,而React-Native项目中包含大量的JS文件构成的框架和组件,那么Android框架又是如何去加载它们的呢?这个过程就是本篇博客的研究的主题了!
本文作者从实际项目总结Back键的最佳实践
(三).开源项目
1. 底部tab:https://github.com/exponentjs/react-native-tab-navigator
2. 轮播图:https://github.com/sincethere/react-native-banner
https://github.com/leecade/react-native-swiper
3. Fetch:https://github.com/sincethere/easier-react-native/blob/master/http/FetchUtil.js
4. 本地持久存储:https://github.com/sunnylqm/react-native-storage
5. View Page:https://github.com/skv-headless/react-native-scrollable-tab-view
6. 选择星星:https://github.com/bluesky0109/react-native-starRating
7. toast:https://github.com/magicismight/react-native-root-toast
8. 加载中:https://github.com/mohebifar/react-native-loader
9. 国际化:https://github.com/joshswan/react-native-globalize
10. 选择列表:https://js.coach/react-native/react-native-actionsheet
11. 圆性加载进度条:https://js.coach/react-native/react-native-circular-progress
https://github.com/oblador/react-native-progress
https://github.com/jeanregisser/react-native-slider
12. Date picker:https://js.coach/react-native/react-native-picker
13. 背景虚化:https://github.com/magus/react-native-fxblurview
14. 懒加载:https://js.coach/react-native/react-native-lazyload?page=3
15. 字母检索列表:https://github.com/xcarpentier/react-native-country-picker-modal
16. 图片选择:https://github.com/marcshilling/react-native-image-picker
17.React Native开源封装AES,MD5加密模块(react-native-encryption-library)
封装了常用的加密方式例如:MD5,AES加密,供React Native进行使用,同时适配Android和iOS平台
18.React Native plugin for Universal Windows Platform(UWP)
UMP的React Native插件
19.React Native平台Material设计效果弹框(Android平台)
(四).工具
作为在墙内的童鞋们,进行安装npm的时候经常因为网络问题加载不成功,这边提供国内淘宝镜像,助大家一臂之力,速度非常的快哦~
3.gulp-react-native-css(就像写css一样写React Style)
尊重原创,未经授权不得转载:From Sky丶清(http://www.lcode.org/) 侵权必究!
关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)