ReactNative占位placeholder的使用方法详解

当我们首次打开一个app的时候会请求接口获取数据，那么获取数据的这段时间展示什么给用户呢？国内很多app都是千篇一律的用一个菊花代替（俗称loading），或者更有心一点的做一个好看一点的loading，但是这样当拿到数据渲染页面的时候会很生硬的切换，总感觉很low。

facebook首页列表是用一个接近真实布局的骨架动画来代替loading，这东西可以称之为skeleton screen或者placeholder，但是翻译过来真不知道该翻译成什么合适，这么做的好处就是在内容加载完成后可以做到流畅无缝切换真实布局，细节决定产品的质量，我觉得facebook对用户体验，交互的细节做的挺不错。先上一张我的fb截图。

rn-placeholder是rn版本的placeholder，我在次基础上做了对flastlist，listview，SectionList的适配封装。先看一下在我的开源项目中的效果：

看完上面的效果是不是感觉比传统的loading要舒服多了，下面是example：

一：flastlist，listview，SectionList使用demo

注：ListParagraph组件目前在我开源项目中，还没有添加到npm，有需要的到我项目中拿，项目地址在文章末尾

二：左图右内容布局

三：段落布局

四：还有Line（行布局），Media（图片布局），使用方法跟 三 一样。

完美收官！

相关推荐：

jQuery封装placeholder的实例代码

HTML5 Placeholder属性的详情介绍

HTML5里的placeholder属性

以上就是React Native占位placeholder的使用方法详解的详细内容，更多请关注Gxl网其它相关文章！