1. 异步逐层渲染。

React Native 虽然一直标榜媲美Native的体验,但实际使用下来,其渲染性还是非常低效,基于ScrollView和ListView两大容器,在渲染上,相当于web端的table布局,需要等整个大table渲染完成才显示页面,也就是说,当容器内有大量的子元素,其白屏时间会非常长。

如何让React Native做到像web端边渲染边加载?可以采用异步渲染的方式,使用requestAnimationFrame 或 setTimeout 定时将单个组件push进ScrollView容器。

基于这个原理,写了个逐层渲染的组件:react-progressive

2. 实现shouldComponentUpdate方法

阅读全文——共1327字

React Native 刚出来不久,写过一篇react-native 组件间通信的文章,里面介绍了组件间三种关系的相互通信。用了一段时间下来,感觉React Native 这套组件间传递数据的方法,实施起来特别麻烦,并且不利于解耦。

翻看React Native的文档,并没有看到实现组件间消息机制的方法。但在源码里,找到了相关的实现。

EventEmitter

RCTDeviceEventEmitter

阅读全文——共1819字

React Native中,ScrollView组件可以使用stickyHeaderIndices轻松实现sticky效果。

而使用ListView组件时,使用stickyHeaderIndices则不生效。

在IOS中的ListView的内部结构,实际是由多个Section组成,最典型的案例就是iphone手机的通讯录,滚动时每个section header会吸顶。

而在web端,使用position : -weblit-sticky实现的吸顶效果,也是类似的原理。具体可以看下之前的文章:《position:sticky 使用条件分析》.

好了,废话不多。在ListView中实现sticky,需要使用cloneWithRowsAndSections 方法,将dataBlob(object),sectionIDs (array),rowIDs (array) 三个值传进去即可。

阅读全文——共1572字

说明:公司项目尚未开源,本文仅阐述实现方案,不涉及具体技术实现细节,见谅。

===============正文分割线=============

前言

Facebook发布React Native 已有两个多月,从开源初期我们就开始筹划的React Web终于也有了一个V1版本。在这次618大促的两个主会场中落地,实现了React Native代码到web的转换。

React Web的目的及意义非常明确: 让React Native代码跑在Web上让一套代码运行在各个移动终端,对前端及业务来说,这是开发效率中一个质的提升。在项目初期,我们也曾向 React团队咨询过类似的问题,他们团队的核心同学 @vjeux 也认为这是非常酷的事情,也是他们未来想做的事情。也许在发布React Native for Android的时候,也会发布React Web也说不定。(YY一下)

阅读全文——共3599字

react native 中,组件间通信无非3种情况:

以DEMO为例,有2个组件Input和 ShowText 。

1、组件嵌套,即Input是ShowText的子组件,在组件间通信可以通过state进行。

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

3、除了以上2种的关系外的组件,比如Input在一个Container组件内,页面级别只有2个组件Container和ShowText。这种情况下,可创建一个全局的通信类。在react-native的2014 example 中 都有这样的代码,这里就不再贴代码了。

阅读全文——共2620字

前2周,fackbook发布了react-native , 一时间前端界异常兴奋。各种概念飞满天,俺作为前端一份子,也凑凑热闹。

花了2天时间,边看API边写代码,react-native 真是太新了,好多问题都google不到内容,来来去去都是官方文档,这2天下来,也算摸清了react-native的一些用法。

DEMO地址:https://github.com/hugohua/react-native-demo  以后又可以催逼自己会ios开发,哈哈。

过两天再写点经验贴吧。先贴个readme来凑凑字数。

React Native Demo

阅读全文——共1686字