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 iframe的相互操作浅析
Oct 14 Javascript
eval与window.eval的差别分析
Mar 17 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 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作的文本留言本的例子(四)
2006/10/09 PHP
在PHP中使用与Perl兼容的正则表达式
2006/11/26 PHP
PHP常用的三种设计模式
2017/02/17 PHP
js表格分页实现代码
2009/09/18 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
python动态加载包的方法小结
2016/04/18 Python
python实现SMTP邮件发送功能
2020/06/16 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
浅析使用Python操作文件
2017/07/31 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
Python实现验证码识别
2020/06/15 Python
python 实现&quot;神经衰弱&quot;翻牌游戏
2020/11/09 Python
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
毕业自我评价范文
2013/11/17 职场文书
理财投资建议书
2014/03/12 职场文书
减负增效提质方案
2014/05/23 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
企业愿景口号
2015/12/25 职场文书
小学班级标语口号大全
2015/12/26 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
Python中requests做接口测试的方法
2021/05/30 Python
nginx设置资源请求目录的方式详解
2022/05/30 Servers