React Native預設佔位placeholder

當咱們首次打開一個app的時候會請求接口獲取數據，那麼獲取數據的這段時間展現什麼給用戶呢？國內不少app都是千篇一概的用一個菊花代替（俗稱loading），或者更有心一點的作一個好看一點的loading，可是這樣當拿到數據渲染頁面的時候會很生硬的切換，總感受很low。

facebook首頁列表是用一個接近真實佈局的骨架動畫來代替loading，這東西能夠稱之爲skeleton screen或者placeholder，可是翻譯過來真不知道該翻譯成什麼合適，這麼作的好處就是在內容加載完成後能夠作到流暢無縫切換真實佈局，細節決定產品的質量，我以爲facebook對用戶體驗，交互的細節作的挺不錯。先上一張個人fb截圖。

http://upload-images.jianshu....

rn-placeholder是rn版本的placeholder，我在次基礎上作了對flastlist，listview，SectionList的適配封裝。先看一下在個人開源項目中的效果：

http://upload-images.jianshu....

看完上面的效果是否是感受比傳統的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>
    }   
 }

http://upload-images.jianshu....

三：段落佈局

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

http://upload-images.jianshu....

四：還有Line（行佈局），Media（圖片佈局），使用方法跟 三 同樣。

完美收官！
項目demo地址：https://github.com/duheng/MoziTHE END！