React Native预设占位placeholder的使用


Posted in Javascript onSeptember 28, 2017

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

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

React Native预设占位placeholder的使用

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

React Native预设占位placeholder的使用

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

一:flastlist,listview,SectionList使用demo

import { ListItem, ListParagraph } from 'components';
 export default class Zi extends Component {
  render() {
   const { loading } = this.props;
   return (
    <ListParagraph
     ParagraphLength={4} // 要渲染的条数
     isLoading={loading} // loading状态
     hasTitle // 是否需要title
     list={this.sectionList} // 这就是SectionList的函数
    />
   );
  }

 }

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

二:左图右内容布局

import Placeholder from 'rn-placeholder';
export default class Cheng extends Component {
  render() {
   return <Placeholder.ImageContent
    hasRadius //左边的方块是否需要圆角
    size={60} // 大小
    animate="fade" // 动画方式
    lineNumber={4} // 右边的线显示的数量
    lineSpacing={5} // 行间距的距离
    firstLineWidth=90% // 第一行的宽度
    lastLineWidth="70%" // 最后一行的宽度
    onReady={this.state.isReady} // 内容是否加载完毕,如果加载完毕会切换到你的真实内容布局
   >
    <Text>左图右内容布局</Text>
   </Placeholder.ImageContent>
  }  
 }

React Native预设占位placeholder的使用

三:段落布局

import Placeholder from 'rn-placeholder';
 export default class Cheng extends Component {
  render() {
   return <Placeholder.Paragraph
    size={60}
    animate="fade"
    lineNumber={4}
    lineSpacing={5}
    lastLineWidth="30%"
    onReady={this.state.isReady}
   >
    <Text>段落布局</Text>
   </Placeholder.Paragraph>
  }  
 }

React Native预设占位placeholder的使用

四:还有Line(行布局),Media(图片布局),使用方法跟 三 一样。

完美收官!

项目demo地址:https://github.com/duheng/Mozi

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript的eval JSON object问题
Nov 15 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
js实现两点之间画线的方法
May 12 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
详解vue+css3做交互特效的方法
Nov 20 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 Javascript
import与export在node.js中的使用详解
Sep 28 #Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 #Javascript
AngularJS路由删除#符号解决的办法
Sep 28 #Javascript
深入理解React高阶组件
Sep 28 #Javascript
基于webpack 实用配置方法总结
Sep 28 #Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 #Javascript
JQuery 选择器、DOM节点操作练习实例
Sep 28 #jQuery
You might like
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
python自然语言编码转换模块codecs介绍
2015/04/08 Python
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
wxPython实现列表增删改查功能
2019/11/19 Python
python标准库OS模块详解
2020/03/10 Python
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
启动一个线程是用run()还是start()
2016/12/25 面试题
数学专业毕业生自荐信
2013/11/10 职场文书
晚宴邀请函范文
2014/01/15 职场文书
节约用水倡议书
2014/04/16 职场文书
工作推荐信范文
2014/05/10 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers
app场景下uniapp的扫码记录
2022/07/23 Java/Android