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