首页 » React Native » React Native技术周报 » 正文

React Native开发技术周报Issue#06

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

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

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

React Native交流3群:496508742

(一).资讯

1.官方发布React Native V0.23.1版本

整体来讲,上周对于RN的版本官方发布出现很多Tag包,例如出现了0.24RC,0.23以及现在的V0.23.1版本。整体点击标题看一下V0.23.1版本更新信息吧。

2.React Native V0.24RC版本

(二).技术文章

1.怎样使用 this

阿里前端妹纸写的文章,很赞。关于js里面有哪些难点,艹,js里面全是难点。。。什么闭包,原型,函数,对象,类型检测,this。。。但是作为一名正统的前端爱好者而言---这点痛算什么。今天我们来解决this这个点。由于牵扯到this,则必定会牵扯到函数,因为没有函数就没有this的存在的意思。

2.React源码剖析系列 - 不可思议的react diff

深入理解React的实现原理,对于做React Native开发具有很好的用处。React diff 作为 Virtual DOM 的加速器,其算法上的改进优化是 React 整个界面渲染的基础,以及性能提高的保障,同时也是 React 源码中最神秘、最不可思议的部分,本文从源码入手,深入剖析 React diff 的不可思议之处。

3.运行 React Native 的默认工程 UIExplorer

使用 React Native 框架可以使用相同的代码编写不同平台的应用. 在学习过程中, 既会兼顾老朋友 Android , 有要熟悉新朋友 iOS . 本文主要介绍运行 RN 的默认工程 UIExplorer .

4.一个专为 React 做动画的库 - Facebook 程序员出品

5.React Native 蛮荒开发生存指南

React Native,在过去一年大红大紫,一下子成为了许多人追捧的新兴技术热点。然而,除却蜻蜓点水般运行一个 Hello World 式的 React Native 小 App,真正想要用 React Native 写一个商用的 App,却要面临很多困难。其中最主要的,就是缺少技术资料,缺少像 Android 这样发展七八年的技术一般,在博客和技术社区上存留的大量的技术资料。因而,面向百度编程,面向 Google 编程,面向 StackOverFlow 编程这三大杀手锏,均对 React Native 开发中遇到困惑表示无可奈何。加之 Facebook 开发组的文档更新速度远远跟不上开发的速度,使得 React Native 的工程化应用之路,恍若在蛮荒生存。笔者不才,为某一商业项目开发 React Native App 已近半年,以自己的踩坑和爬坑经验撰写此文,取名蛮荒开发生存指南XD。

6.用vim开发react native的环境搭建

7.【React Native跨平台应用开发】环境搭建问题记录&&XCODE7模拟器上COMMAND+R失效的几种替换方法

8.React Native动画研究

推荐,该文章很好的解答了React Native动画模块的相关问题以及知识点

9.React-Native系列Android——Touch事件原理及状态效果

Native原生相比于Hybrid或H5最大优点是具有流畅和复杂的交互效果,触摸事件便是其中重要一项,包括点击(Click)、长按(LongClick)、手势(gesture)等。以最简单常见的点击(Click)为例,Native组件可以自定义selector,使得被点击的组件具有动态效果,Android 5.0以上甚至可以有涟漪效果(Material Design)。而这些在Hybrid或H5中很难实现,很多时候区分它们与原生最简单的方法就是检验点击交互效果。

React-Native的强大之处在于实现了较为全面的Touch事件机制,虽然仍略有缺陷,但相比于Hybrid或H5的体验而言,已经足足提高了一大截,下面分析讲解一下其实现原理,和具体使用方式。

10.React-Native系列Android——自定义View组件开发

React-Native是由ReactJS发展而来,继承了其JavaScript XML(简称JSX)和组件化等特性。JSX是一种XML语言,用于视图层级搭建。而组件化是一种设计思想,具有易于维护组合和便于扩展等优点,React-Native中无论是原生Java层,还是JS层,都遵循了这种思想。在Android原生Java端的组件分为两种类型:视图组件(View)和功能组件(Module),React-Native官方为开发者提供了大量的常用组件,位于com.facebook.react.views包和com.facebook.react.modules包下面,基本覆盖了所有类型的组件,包括文本,输入框,图片等。

本文GradientColorView(颜色渐变视图)为例,演示如何自定义一个原生View组件,并在JS中调用。

11.[推荐]React Native 布局方案

本文很好的讲解了在React Native开发中,屏幕适配的内容,附有参考值图表

12.react native 中es6语法解析

13.react-native 组件间通信

React native 中,组件间通信无非3种情况:以DEMO为例,有2个组件Input和 ShowText 。

第一种:组件嵌套,即Input是ShowText的子组件,在组件间通信可以通过state进行。

第二种:组件为同级关系,即Input和ShowText都属于页面级别内的组件,这是常见的组件间通信,可各自提供接口进行通信,利用props进行

第三种:除了以上2种的关系外的组件,比如Input在一个Container组件内,页面级别只有2个组件Container和ShowText。这种情况下,可创建一个全局的通信类。

14.React Native 自定义事件机制

关于实现React Native组件间消息机制的方法有如下三种:EventEmitter/RCTDeviceEventEmitter/Subscribable

15.运行 React Native 的开源工程-问题以及解决方案

在学习 React Native 的过程中, 需要多学习其他人的代码, 则运行其他项目必不可少. 完整的 React Native 包含两个部分, Android 和 iOS . 本文介绍一些在运行时的注意事项.

16.React-Native 实现增量热更新的思路(1)

所谓热更新就是在不重新安装的前提下进行代码和资源的更新,相信在整个宇宙中还不存在觉得热更新不重要的程序猿。

增量热更新就更牛逼了,只需要把修改过和新增的代码和资源推送给用户下载即可,增量部分的代码和资源都比较小,所以整个热更新流程可以在用户无感的情况下完成,我已经想不到更好的更新方式可以让我装更大的逼了。

17.react-native热更新js脚本

该文和上一篇属于同一个作者,都是在热更新领域做了很多的探索,大家有兴趣可以仔细看一下哈。

18.NPM 与 left-pad 事件:我们是不是早已忘记该如何好好地编程?

该文为译文,针对前段时间的NPM和Left-Pad事件做了一些思考。

19.webpack入坑之旅(一)不是开始的开始

该文章为系列文章中的一篇。Webpack 是德国开发者 Tobias Koppers 开发的模块加载器兼打包工具,在webpack中,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。因此, Webpack 当中 js 可以引用 css, css 中可以嵌入图片 dataUrl。对应各种不同文件类型的资源, Webpack 有对应的模块 loader

20.React.createElement方法使用详解

(三).开源项目

1.React Native组件与API学习实例整理

本项目综合了如下react-native组件:Navigator 路由,WebView 网页,TabBarIOS 导航切换栏,TouchableHighlight 点按动作,View 布局

Text 文本,react-native-swiper 图片浏览,自定义组件;本项目综合了如下react-native的API,Animated 动画,fetch 网络请求,Alert 模拟html的alert,CameraRoll 调用本地照片

2.封装React Native  QQ登录组件项目

React Native的QQ登录插件, react-native版本需要0.17.0及以上

3.干货集中营客户端-React Native开发

亲测效果很不错,This is a sharing technology application,is very 因垂思挺。 Written in the react-native framework。初学者学习项目很有用啦。

4.封装XMPP协议框架组件,React Native平台开发即时通信客户端

采用XMPP协议开发IM客户端,虽然整体来说比较重,但是开发React Native平台中小型IM客户端完全足够啦。该项目还在继续维护更新,后期还有很大的提升空间,大家可以着重关注一下。

5.react-native-dribbble-app, Facebook 员工刚刚完成的作品, 用 React native 写了一个 Dribbble App, 界面真心赞

效果超级赞,React Native开发的Dribbble客户端

6.使用 React Native 和 Redux 来创建 TSA App

(四).工具

1.MRN 0.1.0发布了,MRN是一个基于React Native的Material Design风格的组件库

做过Android原生开发的童鞋们,有没有对于MD设计着迷?不管你信不信,反正我是着迷了,使用React Native开发MD设计风格的Android客户端,MRN库足以。

(五).视频

1.视频: React Native热更新教程

关于React Native实现热更新的方案讲解

2.React 入门基础视频

尊重原创,未经授权不得转载:From 江清清的技术专栏(http://www.lcode.org) 侵权必究!

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