快捷導(dǎo)航

React Native預(yù)設(shè)占位placeholder的使用

更新時間：2017年09月28日 09:18:08 作者：墨子攻城

本篇文章主要介紹了React Native預(yù)設(shè)占位placeholder的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

當(dāng)我們首次打開一個app的時候會請求接口獲取數(shù)據(jù)，那么獲取數(shù)據(jù)的這段時間展示什么給用戶呢？國內(nèi)很多app都是千篇一律的用一個菊花代替（俗稱loading），或者更有心一點(diǎn)的做一個好看一點(diǎn)的loading，但是這樣當(dāng)拿到數(shù)據(jù)渲染頁面的時候會很生硬的切換，總感覺很low。

facebook首頁列表是用一個接近真實(shí)布局的骨架動畫來代替loading，這東西可以稱之為skeleton screen或者placeholder，但是翻譯過來真不知道該翻譯成什么合適，這么做的好處就是在內(nèi)容加載完成后可以做到流暢無縫切換真實(shí)布局，細(xì)節(jié)決定產(chǎn)品的質(zhì)量，我覺得facebook對用戶體驗(yàn)，交互的細(xì)節(jié)做的挺不錯。先上一張我的fb截圖。

rn-placeholder是rn版本的placeholder，我在次基礎(chǔ)上做了對flastlist，listview，SectionList的適配封裝。先看一下在我的開源項(xiàng)目中的效果：

看完上面的效果是不是感覺比傳統(tǒng)的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} // 要渲染的條數(shù)
     isLoading={loading} // loading狀態(tài)
     hasTitle // 是否需要title
     list={this.sectionList} // 這就是SectionList的函數(shù)
    />
   );
  }

 }

注：ListParagraph組件目前在我開源項(xiàng)目中，還沒有添加到npm，有需要的到我項(xiàng)目中拿，項(xiàng)目地址在文章末尾

二：左圖右內(nèi)容布局

import Placeholder from 'rn-placeholder';
export default class Cheng extends Component {
  render() {
   return <Placeholder.ImageContent
    hasRadius //左邊的方塊是否需要圓角
    size={60} // 大小
    animate="fade" // 動畫方式
    lineNumber={4} // 右邊的線顯示的數(shù)量
    lineSpacing={5} // 行間距的距離
    firstLineWidth=90% // 第一行的寬度
    lastLineWidth="70%" // 最后一行的寬度
    onReady={this.state.isReady} // 內(nèi)容是否加載完畢，如果加載完畢會切換到你的真實(shí)內(nèi)容布局
   >
    <Text>左圖右內(nèi)容布局</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>
  }  
 }