如何在 React 中创建完全可定制的内容加载器
介绍
加载器几乎是所有应用程序的组成部分。每当您从 API 加载数据时，都需要显示加载消息或加载图标，以通知用户数据正在加载。
本文将展示一个可自定义的Facebook、Instagram类似Grid内容加载器的控件。
先决条件
要完成本教程，您需要：
- 已成功安装 Git。
- Node.js 已在本地安装。
本教程已使用 Node v13.14.0、npm v6.14.4、react v16.13.1 和 react-content-loader v.5.1.0 进行验证。
步骤 1 — 安装并运行 React 应用
首先，请在终端中执行以下命令来克隆此 GitHub 仓库。
git clone https://github.com/myogeshchavan97/react-content-loader-demo.git
初始代码位于该starter-code分支，完整源代码位于主分支，因此请starter-code在终端执行以下命令切换到该分支。
git checkout starter-code
安装依赖项和react-content-loader版本为 5.1.0 的软件包，然后启动 React 应用
npm install
npm install react-content-loader@5.1.0
npm run start
步骤 2 — 将内容加载器集成到应用程序中
现在，在文件夹components内创建一个新文件夹src，并在其中添加一个新文件，FacebookLoader.js内容如下。
import React from 'react';
import { Facebook } from 'react-content-loader';
const FacebookLoader = () => {
return (
<div>
<h2>Facebook Loader</h2>
<Facebook />
</div>
);
};
export default FacebookLoader;
这里，您添加了软件包Facebook中的默认加载器组件react-content-loader。
现在，打开src/App.js并使用上述FacebookLoader组件。
import React from 'react';
import FacebookLoader from './components/FacebookLoader';
import './App.css';
function App() {
return (
<div className="App">
<FacebookLoader />
</div>
);
}
export default App;
这将生成如下所示的加载器：
步骤 3 — 自定义加载器
InstagramLoader.js现在，在文件夹内创建一个新文件components，内容如下
import React from 'react';
import { Instagram } from 'react-content-loader';
const InstagramLoader = () => {
return (
<div>
<h2>Instagram Loader</h2>
<Instagram width={500} height={500} backgroundColor="#cebaba" speed={3} />
</div>
);
};
export default InstagramLoader;
在这里，您提供了额外的属性来自定义加载器。
- width 和 height 属性用于指定加载器的宽度和高度，单位为像素 (px)。
- backgroundColor 用于指定加载器的背景色
- 速度，用于指定动画速度（以秒为单位）。
现在，打开src/App.js并使用上述InstagramLoader组件。
import React from 'react';
import FacebookLoader from './components/FacebookLoader';
import InstagramLoader from './components/InstagramLoader';
import './App.css';
function App() {
return (
<div className="App">
<InstagramLoader />
<FacebookLoader />
</div>
);
}
export default App;
现在，您将看到如下所示的自定义 Instagram 加载器：
步骤 4 — 使用自定义 SVG 代码自定义加载器
该react-content-loader网站还提供了一个用户界面工具，您可以通过指定背景图片、加载方向以及其他属性来创建自定义加载动画。您可以点击此处查看。
该网站还提供了一个可供使用的不同加载器的图库。
例如，要使用网格布局加载器，请在文件夹GridLayoutLoader.js内创建一个新文件components，内容如下
现在，打开src/App.js并使用上述GridLayoutLoader组件。
import React from 'react';
import InstagramLoader from './components/InstagramLoader';
import GridLayoutLoader from './components/GridLayoutLoader';
import FacebookLoader from './components/FacebookLoader';
import './App.css';
function App() {
return (
<div className="App">
<GridLayoutLoader />
<InstagramLoader />
<FacebookLoader />
</div>
);
}
export default App;
您可以在这里查看所有可用的装载机图库。
结论
正如你所看到的，内容加载器通过自定义动画效果，让应用程序看起来非常美观。
本文的完整源代码请查看GitHub 上的react-content-loader-demo仓库。您还可以查看此应用程序的在线演示。
别忘了订阅我的每周新闻简报，直接在您的收件箱中接收精彩的技巧、窍门和文章。点击此处订阅。
