React Native預(yù)設(shè)占位placeholder的使用
當(dāng)我們首次打開一個app的時候會請求接口獲取數(shù)據(jù),那么獲取數(shù)據(jù)的這段時間展示什么給用戶呢?國內(nèi)很多app都是千篇一律的用一個菊花代替(俗稱loading),或者更有心一點的做一個好看一點的loading,但是這樣當(dāng)拿到數(shù)據(jù)渲染頁面的時候會很生硬的切換,總感覺很low。
facebook首頁列表是用一個接近真實布局的骨架動畫來代替loading,這東西可以稱之為skeleton screen或者placeholder,但是翻譯過來真不知道該翻譯成什么合適,這么做的好處就是在內(nèi)容加載完成后可以做到流暢無縫切換真實布局,細(xì)節(jié)決定產(chǎn)品的質(zhì)量,我覺得facebook對用戶體驗,交互的細(xì)節(jié)做的挺不錯。先上一張我的fb截圖。
rn-placeholder是rn版本的placeholder,我在次基礎(chǔ)上做了對flastlist,listview,SectionList的適配封裝。先看一下在我的開源項目中的效果:
看完上面的效果是不是感覺比傳統(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組件目前在我開源項目中,還沒有添加到npm,有需要的到我項目中拿,項目地址在文章末尾
二:左圖右內(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)容是否加載完畢,如果加載完畢會切換到你的真實內(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> } }
四:還有Line(行布局),Media(圖片布局),使用方法跟 三 一樣。
完美收官!
項目demo地址:https://github.com/duheng/Mozi
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
React+Electron快速創(chuàng)建并打包成桌面應(yīng)用的實例代碼
這篇文章主要介紹了React+Electron快速創(chuàng)建并打包成桌面應(yīng)用,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-12-12react中使用echarts,并實現(xiàn)tooltip循環(huán)輪播方式
這篇文章主要介紹了react中使用echarts,并實現(xiàn)tooltip循環(huán)輪播方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01React中使用TS完成父組件調(diào)用子組件的操作方法
由于在項目開發(fā)過程中,我們往往時需要調(diào)用子組件中的方法,這篇文章主要介紹了React中使用TS完成父組件調(diào)用子組件,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07ReactHooks批量更新state及獲取路由參數(shù)示例解析
這篇文章主要介紹了React Hooks如何實現(xiàn)批量更新state以及獲取路由參數(shù)的示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助2021-10-10React Native 自定義下拉刷新上拉加載的列表的示例
本篇文章主要介紹了React Native 自定義下拉刷新上拉加載的列表的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-03