React Native 中的多级界面缓存实现

Navigator 缓存界面

Navigator 是 React Native 提供的导航器组件用于界面场景间的切换,这里也是借助它来实现一个界面缓存,我们知道 Navigator 实现了一个路由栈,通常使用 push() 方法来装载界面,例如:假设当前界面为 V1,我们想打开一个 V2 界面:

navigator.push({
    view: 'V2'
});

Continue reading

Hello React Native Android 分享

Facebook 在 9 月份发布了 React Native Android 版本,我们对此进行了些开发尝试,然后做了小结最后形成了这份分享。分享主要面向对 React Native 了解不深的同学,主要介绍了 RN(React Native缩写,下同) 的特点、优势及现阶段的不足。另外因为本文是通过 PPT 改写,所以内容会有一些删减、省略。
Continue reading

React Native 开发环境部署

本文介绍内容包含 OSX 系统下 React Native 的 iOS、Android 开发环境部署,以及 Windows 环境下 Android 开发环境部署。并且会记录部署过程中遇到的问题和解决方法。

一、准备

npm 设置

因为环境部署涉及非常多的包安装,而国内的 npm 速度并不理想,所以建议安装 nrm 选择最快的 npm 国内镜像,推荐 taobao,虽然设置了国内镜像但有时候还是需要配合 VPN。

npm install -g nrm
nrm ls
nrm use taobao

Continue reading

使用 CSS3 Rem 单位布局

Rem(font size of the root element)是指相对于根元素的字体大小的单位,它与 em 类似,只不过 em 是相对与父层进行计算,而 rem 是相对与根元素的 font-size 进行计算。所以它即比 px 单位灵活,又比 em 稳定,是一个很有潜力、值得尝试的 CSS 单位。

Rem 布局

简而言之就是在 CSS 布局时使用 rem 单位,上面介绍了 rem 的特点就是基于根元素的 font-size 进行计算,所以可以通过动态的修改根元素的 font-size 值大小,来让页面的布局达到自适应的等比缩放效果,从而使布局在不同尺寸的屏幕上表现一致。
Continue reading

SQ 再起航

距离 Squirrel 最后一次更新已有 4 个月的时间,在此期间因为换工作所以没有足够的时间精力来维护,现在基本稳定,所以 Squirrel 的更新会回归正轨。

这里新开辟 Squirrel 栏目,算是 Squirrel 框架的专属博客吧,会记录一些框架设计理念,大版本的升级规划和项目中的使用技巧等,Squirrel 会以小步慢跑的节奏进行更新,虽然目前还是一人维护,但现在有更强大的团队支撑,所以 Squirrel 会更加茁壮的成长下去。
Continue reading

CSS 布局调试工具

说是工具其实只是一段 Javascript 代码,但非常实用,它会给页面里所有的 DOM 元素添加一个 1px 的描边(outline),方便我们在调试 CSS 过程中分析、排查问题。

先来看看代码,它有两个版本,一个是使用的$$选择器,代码量更少(浏览器控制台支持 $$ 选择器);另一种就是传统的document.querySelectorAll选择器:
Continue reading