最近浏览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地址 望大佬多多批评
