react-loading-skeleton 制作精美的动画加载骨架,可自动适应您的应用程序。
基本用法 通过 npm/yarn 使用 react-loading-skeleton 安装。
从“React加载骨架”导入骨架;
// 简单的单行加载骨架
// 五行加载骨架原则 适应你定义的样式 组件被设计成直接在你的组件中使用,在它仍然加载时代替内容。
与其他库不同,与其精心制作骨架屏幕以匹配您的内容所采用的字体大小、行高或边距,不如使用组件使其自动填充正确的尺寸。
例如: class Blogpost extends Component { render() { return (
{this.props.title ||
}
{this.props.body ||
}
);
...将为标题和正文部分生成正确大小的骨架,而无需对组件进行任何进一步配置。
这可确保加载状态随着您的布局或排版的任何更改而保持最新。
不要制作专用的骨架屏幕,而是制作具有内置骨架状态的组件。
除了保持样式同步之外,还有一些其他原因可以做到这一点: 组件表示它可以加载的所有可能状态 - 包括加载。
它允许更灵活的加
1