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 相关文章推荐
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
JavaScript实现随机点名程序
Mar 25 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 Javascript
使用Cargo工具高效创建Rust项目
Aug 14 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 split()函数的用法详解
2013/06/05 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
PHP多进程编程实例详解
2017/07/19 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
PHP attributes()函数讲解
2019/02/03 PHP
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
Python yield使用方法示例
2013/12/04 Python
python网络编程实例简析
2014/09/26 Python
你应该知道的python列表去重方法
2017/01/17 Python
vscode 远程调试python的方法
2017/12/01 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
基于Python实现用户管理系统
2019/02/26 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
室内设计专业个人的自我评价
2013/12/18 职场文书
单位提档介绍信
2014/01/17 职场文书
书法大赛策划方案
2014/06/04 职场文书
html form表单基础入门案例讲解
2021/07/21 HTML / CSS
2022年四月新番
2022/03/15 日漫