欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2017年09月28日 09:18:08   作者:墨子攻城  
本篇文章主要介紹了React Native預(yù)設(shè)占位placeholder的使用,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

當(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í)例代碼

    這篇文章主要介紹了React+Electron快速創(chuàng)建并打包成桌面應(yīng)用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-12-12
  • 詳解react服務(wù)端渲染(同構(gòu))的方法

    詳解react服務(wù)端渲染(同構(gòu))的方法

    這篇文章主要介紹了詳解react服務(wù)端渲染(同構(gòu))的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-09-09
  • 深入了解React中的合成事件

    深入了解React中的合成事件

    React 中的事件,是對(duì)原生事件的封裝,叫做合成事件。這篇文章主要通過幾個(gè)簡單的示例為大家詳細(xì)介紹一下React中的合成事件,感興趣的可以了解一下
    2023-02-02
  • React之虛擬DOM的實(shí)現(xiàn)原理

    React之虛擬DOM的實(shí)現(xiàn)原理

    這篇文章主要介紹了React之虛擬DOM的實(shí)現(xiàn)原理分析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • create-react-app開發(fā)常用配置教程

    create-react-app開發(fā)常用配置教程

    這篇文章主要為大家介紹了create-react-app開發(fā)常用配置教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-06-06
  • react中使用echarts,并實(shí)現(xiàn)tooltip循環(huán)輪播方式

    react中使用echarts,并實(shí)現(xiàn)tooltip循環(huán)輪播方式

    這篇文章主要介紹了react中使用echarts,并實(shí)現(xiàn)tooltip循環(huán)輪播方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-01-01
  • React中使用TS完成父組件調(diào)用子組件的操作方法

    React中使用TS完成父組件調(diào)用子組件的操作方法

    由于在項(xiàng)目開發(fā)過程中,我們往往時(shí)需要調(diào)用子組件中的方法,這篇文章主要介紹了React中使用TS完成父組件調(diào)用子組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-07-07
  • ReactHooks批量更新state及獲取路由參數(shù)示例解析

    ReactHooks批量更新state及獲取路由參數(shù)示例解析

    這篇文章主要介紹了React Hooks如何實(shí)現(xiàn)批量更新state以及獲取路由參數(shù)的示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助
    2021-10-10
  • React Native 自定義下拉刷新上拉加載的列表的示例

    React Native 自定義下拉刷新上拉加載的列表的示例

    本篇文章主要介紹了React Native 自定義下拉刷新上拉加載的列表的示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-03-03
  • react實(shí)現(xiàn)阻止父容器滾動(dòng)

    react實(shí)現(xiàn)阻止父容器滾動(dòng)

    這篇文章主要介紹了react實(shí)現(xiàn)阻止父容器滾動(dòng)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-11-11

最新評(píng)論