本篇文章主要介绍了React Native预设占位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

 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>
  }  
 }

三:段落布局

 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>
  }  
 }


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

完美收官!

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
淘宝春晚数据:660亿次互动 清空购物车最高2.3万元

淘宝春晚数据:660亿次

除夕夜当晚,清空淘宝购物车的活动互动次数超过660亿次,
截至23点 快手春晚互动量437亿次超去年208亿次

截至23点 快手春晚互

截至24日23点,全球观众参与快手前三轮红包互动累计达43
遭美国防部反对 美商务部撤回美企对华为限制措施

遭美国防部反对 美商

华尔街日报援引消息人士称,因遭到美国防部和财政部反对
支付宝五福开奖超3亿人分5亿 大多分到1.68元

支付宝五福开奖超3亿

根据支付宝开奖信息显示,今年共有超过3亿人集齐了五福,3
斗鱼向武汉防疫一线捐款1000万 其总部位于武汉

斗鱼向武汉防疫一线捐

总部位于湖北武汉的斗鱼今日宣布向武汉防疫一线捐款10
途家升级退改政策 将为武汉医务人员提供免费住宿

途家升级退改政策 将

针对新型冠状病毒肺炎疫情,途家在推出民宿订单退改政策
最新文章
jQuery设置下拉框显示与隐藏效果的方法分析

jQuery设置下拉框显示

这篇文章主要介绍了jQuery设置下拉框显示与隐藏效果的
策略模式实现 Vue 动态表单验证的方法

策略模式实现 Vue 动

策略模式(Strategy Pattern)又称政策模式,其定义一系列的
Layui Form 自定义验证的实例代码

Layui Form 自定义验

今天小编就为大家分享一篇Layui Form 自定义验证的实
图解NodeJS实现登录注册功能

图解NodeJS实现登录注

这篇文章主要介绍了NodeJS实现登录注册功能,本文图文
基于Layui自定义模块的使用方法详解

基于Layui自定义模块

今天小编就为大家分享一篇基于Layui自定义模块的使用
layer弹出层自适应高度,垂直水平居中的实现

layer弹出层自适应高

今天小编就为大家分享一篇layer弹出层自适应高度,垂直