最近瀏覽iOS的常用三方庫，發(fā)現(xiàn)了一個(gè) DZNEmptyDataSet 挺好用的，目標(biāo)用于沒有數(shù)據(jù)是頁面要顯示的布局，類似如圖

網(wǎng)絡(luò)配圖

DZNEmptyDataSet 可以實(shí)現(xiàn)的效果
查看我之前的文章

23011-ff366119ccf3c478.png

圖片帶有幾種不同的動(dòng)畫效果

當(dāng)然這些都是iOS原生的，考慮到我公司的RN項(xiàng)目也有這種需求，我就照著DZNEmptyDataSet的效果圖嘗試著封裝了一個(gè)RN組件

效果如圖：

image.png

同時(shí)寫了三個(gè)動(dòng)畫，旋轉(zhuǎn)，縮放，漸隱

漸隱.gif

縮放.gif

旋轉(zhuǎn).gif

相關(guān)屬性

/*聲明屬性*/
emptyDataSet.propTypes = {
    topSpace: PropTypes.number, // 子組件距離上部間距
    titleTopSpace: PropTypes.number, // 標(biāo)題距離上部間距
    title: PropTypes.string, // 標(biāo)題
    description: PropTypes.string, // 描述
    descriptionTopSpace: PropTypes.number, // 描述距離上部間距
    buttonTopSpace: PropTypes.number, // 默認(rèn)按鈕距離上部間距
    buttonTitle: PropTypes.string, // 默認(rèn)按鈕標(biāo)題
    isShowAnimal: PropTypes.bool, // 是否顯示動(dòng)畫
    animalTyle: PropTypes.string, // 動(dòng)畫類型 opacity(漸變)  transform(旋轉(zhuǎn))  scale(縮放)
    customElement: PropTypes.element, // 自定義組件
    screenClick: PropTypes.func, // 點(diǎn)擊屏幕觸發(fā)方法
    buttonClick: PropTypes.func, // 點(diǎn)擊默認(rèn)按鈕觸發(fā)方法
};

使用

<EmptyDataSet normalImage={NormalImage} 默認(rèn)要顯示圖片
                              animalImage={AnimalImage} 動(dòng)畫要顯示圖片
                              animalTyle='scale'
                              isShowAnimal={true}
                              topSpace={50}
                              title='這只是一個(gè)標(biāo)題'
                              description='這只是一個(gè)描述'
                              buttonTitle='啊，服務(wù)器宕機(jī)了，快點(diǎn)點(diǎn)我刷新一下吧~'
                              customElement={<Text>自定義組件</Text>}
                              screenClick={()=>{
                                  
                              }}
                              buttonClick={()=>{
                                  
                               }}
                />

github地址 望大佬多多批評(píng)