尊重版权,未经授权不得转载出处:www.lcode.org
本周报来自江清清的技术专栏,欢迎微信关注公共号:codedev123.精彩技术文章第一时间推送!
说在前面的话:React Native开发技术周报，主要会涉及React Native最新资讯,React Native教程,技术开发文章,开源项目,工具,视频等等。今天是我们的第二十期，同时各位朋友有优秀的有关React Native技术开发文章可以发给我。
React Native交流9群:536404410
(一).资讯(Redux相关)
本教程深入浅出，配套 简明教程、进阶教程（源码精读）以及文档注释丰满的 Demo 等一条龙服务
2.关于Redux的一些总结(一)：Action & 中间件 & 异步
Redux的设计就继承了Flux的架构，并将其完善，提供了多个API供开发者调用。借着react-redux，可以很好的与React结合，开发组件化程度极高的现代Web应用。
从实战项目角度出发，进行项目Redux重构，了解并且学会最基础的Redux使用方法
来自新美大，Reading项目作者的作品，大家都懂的！
Flux 架构已然让人觉得有些迷惑，而比 Flux 更让人摸不着头脑的是 Flux 与 Redux 的区别。Redux 是一个基于 Flux 思想的新架构方式，本文将探讨它们的区别。
(二).技术文章
1.React-Native 统一 navigator 路由入口
背景：RN 试用了一段时间了，其中 navigator 做为一个核心组件控制着整个 rnApp 的页面切换。之前写 demo 和网上见到的一些例子，navigator 使用方式各不相同，多数还都是到切换时才会从头引用。 做为一个前端童鞋，用惯了各 SPA 框架强大且优雅的路由控制，真受不了这样的调用方法。 借鉴一些前端 spa route 的思想，写了一个 navigator 统一路由控制。
redux-thunk 是一个比较流行的 redux 异步 action 中间件，比如 action 中有 setTimeout 或者通过 fetch通用远程 API 这些场景，那么久应该使用 redux-thunk 了。redux-thunk 帮助你统一了异步和同步 action 的调用方式，把异步过程放在 action 级别解决，对 component 没有影响。下面通过例子一步步来看看。
4.React 实践心得：react-redux 之 connect 方法详解
Redux 是「React 全家桶」中极为重要的一员，它试图为 React 应用提供「可预测化的状态管理」机制。Redux 本身足够简单，除了 React，它还能够支持其他界面框架。所以如果要将 Redux 和 React 结合起来使用，就还需要一些额外的工具，其中最重要的莫过于 react-redux 了。
react-redux 提供了两个重要的对象，Provider 和 connect，前者使 React 组件可被连接（connectable），后者把 React 组件和 Redux 的 store 真正连接起来。
5.React Native 0.31 Bundle 预加载优化
使用 React Native 开发混合应用的过程中，我们在打完 bundle 进 release 包后，会发现第一次进入页面（React 的 Activity）会有一个短暂的白屏过程（在真机上近 1秒，在模拟器上比较快，在 200毫秒 左右），而且在完全退出后再进入，仍然会有这个白屏。
仔细查看加载过程（其实猜猜都能知道）后可以发现，这个过程就是在加载我们的 js bundle，通常即便是一个小的 RN 应用（混合应用中的子业务），也会动辄到 1MB 的大小，除非是完整的 RN 应用，可以把这个当做是启动速度，否则这样的加载速度都是对用户体验的很大伤害。于是我们决定进行 Bundle 预加载的优化。
Promise 是一个非常简单的概念，即使你没有机会使用 Promise，你也可能阅读过一些关于 Promise 的文章。Promise 的价值在于使得异步代码以一个更可读的风格结构化，而不是因异步函数嵌套显得混乱不堪。这篇文章会接触到 6 个你可能不知道的关于 Promise 的事。
7.React native从入门到深入四--布局 FlexBox布局
界面的搭建如果采用CSS的布局，基于盒子模型，依赖display属性 ，position属性，float属性。但对于那些特殊布局非常不方便，比如，垂直居中。我们在React Native中使用flexbox规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构。
8.[React Native Android 安利系列]FLEX布局精讲
flex布局，本是一种新的css解决方案，它是『弹性布局』的缩写。我们上一节讲到过盒子模型，这个模型的值都是定死的，并不具备可伸缩的性质，所以，应对不同屏幕，做到响应式布局，就很困难。但是flex布局，给了我们一种全新的解决方案，从定位方式，到宽高设置，都可以做到随心所欲。比如：flex布局可以指定元素宽或者高相对于同级的比例，而不是定值。
9.深度使用react-native的热更新能力,必须知道的一个shell命令
react-native 我很看好它,虽然它很有可能将来把我自己的饭碗给砸了.大势所趋,没办法;浪潮之下,要么开车,要么被压平成路,硬着头皮上吧,万一大家以后都用这个搞了呢…
本文将讲述下在原生和React Native之间的通信方式。
11.React Native 每日一学(Learn a little every day)
12.【稀饭】react native 实战系列教程之首页列表UI实现
今天主要说说如何通过字体文件加载应用中的一些图标
状态管理是目前构建单页应用中不可或缺的一环，也是值得花时间学习的知识点。React官方推荐我们使用Redux来管理我们的React应用，同时也提供了Redux的文档来供我们学习，中文版地址为cn.redux.js.org/index.html
15.使用 React Native 构建 Facebook Paper 类似的 UI
(三).开源项目
1.React Native开源项目如何运行（附一波开源项目）
学习任何技术，最快捷的方法就是学习完基础语法，然后模仿开源项目进行学习，React Native也不例外。React Native推出了1年多了， 开源项目太多了，我们以其中一个举例子.给大家演示下如何运行开源项目。同时再推荐一波优秀的开源项目
2.React Native图片文件上传库-Android/iOS通用
封装原生模块，实现Android，iOS双平台通用的图片文件上传功能，同时支持上传进度提醒。
功能比较完整，界面效果非常不错。
关注我的订阅号(codedev123),每天推送分享移动开发技术(Android/iOS),React Native技术文章,项目管理,程序猿日常点滴以及精品技术资讯文章(欢迎关注,精彩第一时间推送)。
