本篇文章主要介绍了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

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

最新资讯
专家:未来5-10年我国商业小卫星发射需求超4000颗

专家:未来5-10年我国商

未来5-10年,我国商业小卫星的发射需求超4000颗,商业卫星
申通、圆通、韵达、顺丰8月单票收入同比下滑均超20%

申通、圆通、韵达、顺

由已披露的报告显示,圆通、韵达、申通和顺丰8月的单票
Netflix纪录片《社交困境》让用户重新评估Facebook等社交媒体

Netflix纪录片《社交

Netflix发布名为《社交困境》(The Social Dilemma)新纪
滴滴张博:智慧交通大脑将在交通基础设施变革中扮演重要角色

滴滴张博:智慧交通大脑

滴滴出行CTO张博表示,智慧交通大脑将在交通基础设施变
微信发布iOS 7.0.16测试版:聊天框可选不显示

微信发布iOS 7.0.16测

在微信7.0.16 for iOS测试版中,聊天会话除了可以执行“
美司法部控告六人涉嫌贿赂亚马逊员工以获得市场优势

美司法部控告六人涉嫌

据报道,美国司法部周五指控六人参与贿赂亚马逊员工和承
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,