最近浏览iOS的常用三方库，发现了一个 DZNEmptyDataSet 挺好用的，目标用于没有数据是页面要显示的布局，类似如图

网络配图

DZNEmptyDataSet 可以实现的效果
查看我之前的文章

23011-ff366119ccf3c478.png

图片带有几种不同的动画效果

当然这些都是iOS原生的，考虑到我公司的RN项目也有这种需求，我就照着DZNEmptyDataSet的效果图尝试着封装了一个RN组件

效果如图：

image.png

同时写了三个动画，旋转，缩放，渐隐

渐隐.gif

缩放.gif

旋转.gif

相关属性

/*声明属性*/
emptyDataSet.propTypes = {
    topSpace: PropTypes.number, // 子组件距离上部间距
    titleTopSpace: PropTypes.number, // 标题距离上部间距
    title: PropTypes.string, // 标题
    description: PropTypes.string, // 描述
    descriptionTopSpace: PropTypes.number, // 描述距离上部间距
    buttonTopSpace: PropTypes.number, // 默认按钮距离上部间距
    buttonTitle: PropTypes.string, // 默认按钮标题
    isShowAnimal: PropTypes.bool, // 是否显示动画
    animalTyle: PropTypes.string, // 动画类型 opacity(渐变)  transform(旋转)  scale(缩放)
    customElement: PropTypes.element, // 自定义组件
    screenClick: PropTypes.func, // 点击屏幕触发方法
    buttonClick: PropTypes.func, // 点击默认按钮触发方法
};

使用

<EmptyDataSet normalImage={NormalImage} 默认要显示图片
                              animalImage={AnimalImage} 动画要显示图片
                              animalTyle='scale'
                              isShowAnimal={true}
                              topSpace={50}
                              title='这只是一个标题'
                              description='这只是一个描述'
                              buttonTitle='啊，服务器宕机了，快点点我刷新一下吧~'
                              customElement={<Text>自定义组件</Text>}
                              screenClick={()=>{
                                  
                              }}
                              buttonClick={()=>{
                                  
                               }}
                />

github地址 望大佬多多批评