溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
當我們首次打開一個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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
