Quantcast
Channel: 懒得折腾
Viewing all articles
Browse latest Browse all 764

React Native开发技术周报Issue#12

$
0
0

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

2.旅行喵 React Native 技术实践

 炳根大神的又一大招放出来了~

3.React-Native痛点解析之开发环境搭建及扩展

好吧下面来一波Realm React Native应用详解专题~

4.移动端数据库新王者-Realm React Native版本应用详解之抛砖引玉入坑篇(一)

5.移动端数据库新王者-Realm React Native版本应用详解之略陈固陋爬坡篇(二)

6.移动端数据库新王者-Realm React Native版本应用详解之略陈固陋爬坡篇续1(三)

(二).技术文章

1.React Native进阶之原生模块封装特性篇详解-适配iOS开发

该文章主要讲解原生模块的一些特性例如:回调方法函数,Promises,多线程,常量设置,事件发送到JavaScript,监听生命周期事件,获取封装Swift原生模块等相关的特性。

2.React Native系列文章(七)原生模块(上)

ReactNative目前更多的是用于在原生App中加入一个新的模块。那么,此时如果这个ReactNative模块需要使用到一些原生模块的功能,比如访问平台的API;或者你要复用现成的Java代码;又或者使用Java已经成熟的第三方Library,那么这篇文章会一步步告诉你,如何去调用一个已经封装好的Android原生代码。

3.React Native系列文章(七)原生模块(下)

上一篇文章React Native系列文章(七)原生模块(上)中我们介绍了原生模块的基本用法,本篇文章将介绍原生模块的高级用法—ReactNative与原生模块的通信方式。

4.React Native 热加载(Hot Reload)原理简介-中文版本

官方博客,热加载原理介绍,下面一片是原文,喜欢都英文的大家可以读一下哈

5.Introducing Hot Reloading

官方热加载原文版本

6.用 React 整合 LogEntries JavaScript 库

众所周知,React.js已经被证实是众多JavaScript架构中的有力竞争者。按理说,它已经成为web开发人员应当考虑的,在当前及未来项目中使用的少数项目库之一。而了解它如何与技术栈中的其他库相集成,是非常重要的一环。如果你目前正在使用LogEntries,或者考虑使用LogEntries,那懂得如何集成React.js和LogEntries就非常关键。本文将阐明他们间的互操作性。

7.实例讲解基于 react+redux 的前端开发流程

在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 star 数达 42000 +,超过了 jquery 的 39000+,也即将超过前几年比较火的angular 1 的 49000+;redux 的 star 数也要接近 20000,可见大家对其的热情程度,究竟是什么魔力让大家为之疯狂呢?让我们上车,亲自体验一波试试~~本文章偏向于讲解redux流程。宅印前端基于 react + redux 的模式开发,我们指定了一套分工明确的并行开发流程。下面通过一个 “苹果篮子” 实例,来看看整个应用开发流程。

8.ES6的变量声明

在ES5中,变量声明只有var和function以及隐式声明三种,在ES6中则增加了let,const,import和class四种,以下来介绍着七种变量的声明。

9.JavaScript函数式编程探索与思考

函数式编程是一种编程范式,它将电脑运算视为数学上的函数计算,并且避免使用程序状态以及可变数据。函数式编程强调程序执行的结果而非执行的过程,倡导利用若干简单的执行单元让计算结果不断渐进,逐层推导复杂的运算,而不是设计一个复杂的执行过程。今天我试图用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环境搭建爬坑血泪史

17.无需Webpack开撸React

Webpack虽好,但对于一个React新手来讲,如何开始是个很大的挑战。我就遇到很多初试身手的开发者在学习React的康庄大道上被难倒而功亏一篑,原因就是陷入了Webpack和配置的坑里。为证明你可以专注学习React而无需ES2015、JSX编译以及Webpack的帮助,我撸了一个样例库,你可以在GitHub得到它。这个仓库使用Gulp来合并、压缩你的文件,无需ES2015或是JSX。要是你想专注于React,余事勿扰,那就不妨一试。

18.实例讲解基于 React+Redux 的前端开发流程

19.fetch简介: 新一代Ajax API

AJAX半遮半掩的底层API是饱受诟病的一件事情. XMLHttpRequest 并不是专为Ajax而设计的. 虽然各种框架对XHR 的封装已经足够好用, 但我们可以做得更好。更好用的API是 fetch 。下面简单介绍 window.fetch 方法, 在最新版的 Firefox 和 Chrome 中已经提供支持。

20.React Native Module for CodePush 入门

21.React Native Module for CodePush 实战

22.ReactNative中组件调用源码分析

本文主要在源码上分析了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,这里做一下整理。

25.React-Native之flexbox布局篇

这篇博客稍微讲解下React-Native中的布局。比较简单。RN的而布局是用css中的flexbox布局,所以布局起来与Android传统的布局样式有点像。接下来赶紧去学习吧,作为React Native的开发基础非常有必要哦

26. 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框架又是如何去加载它们的呢?这个过程就是本篇博客的研究的主题了!

28.React Native中 Back 键的攻坚实战

本文作者从实际项目总结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平台)

(四).工具

1.淘宝 NPM 镜像

作为在墙内的童鞋们,进行安装npm的时候经常因为网络问题加载不成功,这边提供国内淘宝镜像,助大家一臂之力,速度非常的快哦~

2.react-native-babel(使用ES6+)

3.gulp-react-native-css(就像写css一样写React Style)

尊重原创,未经授权不得转载:From Sky丶清(http://www.lcode.org/) 侵权必究!

关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)



Viewing all articles
Browse latest Browse all 764

Trending Articles