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
        size={60}
        animate="fade"
        lineNumber={4}
        lineSpacing={5}
        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地址：github.com/duheng/Mozi
THE END！