首頁 > 文章 > web前端 > React Native佔位placeholder的使用方法詳解

React Native佔位placeholder的使用方法詳解

小云云原創: 2018-01-30 09:45:222007瀏覽

本文主要介紹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 &#39;components&#39;;
 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 &#39;rn-placeholder&#39;;
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 &#39;rn-placeholder&#39;;
 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（圖片佈局），使用方法跟三一樣。

完美收官！

React Native佔位placeholder的使用方法詳解

相關文章