前言
在前端开发中，很多时候需要在项目中使用图标或徽章来表示软件版本、构建状态、测试覆盖率等信息。而 shields.io 可以帮助我们生成这样的徽章，非常方便。在 React 项目中，使用 react-shields 包可以更加简洁的绘制这样的徽章。
在这篇文章中，我们将介绍如何使用 react-shields 包在 React 项目中绘制徽章。
步骤
安装 react-shields
首先需要安装 react-shields 包，可以使用 npm 或 yarn 安装。
npm install react-shields
yarn add react-shields
绘制基本徽章
react-shields 提供了一个名为 Shields 的组件，可以用来绘制徽章。下面是一个最简单的例子：
-- -------------------- ---- -------
------ ------- ---- ----------------
-------- ----- -
------ -
---- ----------------
-------- --------------- --------------- --
------
--
-上面的代码中，我们创建了一个 Shields 组件，并传递了 label 和 message 两个属性作为徽章文本。
这段代码的渲染效果如下：
可以看到，这个徽章的样式与 shields.io 生成的徽章非常相似。
使用不同背景颜色
与 shields.io 相似，react-shields 也提供了不同背景颜色的配置。我们可以通过设置 color 属性设置徽章的背景颜色。
下面是一个例子：
-- -------------------- ---- -------
------ ------- ---- ----------------
-------- ----- -
------ -
---- ----------------
--------
---------------
---------------
--------------
--
------
--
-上面的代码中，我们设置了 color 属性为 orange，可以看到徽章的背景颜色变成了橙色。其他可选的颜色还包括红色、绿色、蓝色等。
使用链接徽章
react-shields 也支持创建链接徽章。与普通徽章不同的是，链接徽章可以点击跳转到指定链接。我们可以设置 link 属性为徽章链接。
下面是一个例子：
-- -------------------- ---- -------
------ ------- ---- ----------------
-------- ----- -
------ -
---- ----------------
--------
-----------
----------------
------------
--------------------------------------------------
--
------
--
-上面的代码中，我们设置了 link 属性为 https://www.npmjs.com/package/react-shields，可以看到徽章左侧出现了链接图标，表示这是一个链接徽章。
点击徽章即可跳转到对应链接。
绘制复杂徽章
在实际项目中，我们通常需要绘制一些复杂的徽章，例如同时显示多个文本或者嵌入图片等。react-shields 提供了 leftText、rightText 和 icon 三个属性，可以用来设置左侧文本、右侧文本和图片。
下面是一个例子：
-- -------------------- ---- -------
------ ------- ---- ----------------
-------- ----- -
------ -
---- ----------------
--------
------------------
---------------
-------------
------
----
------------------------------------------------------------
-------- --------
--
-
--
------
--
-上面的代码中，我们设置了左侧文本为 license，右侧文本为 MIT，背景颜色为 green，并在徽章中嵌入了一个图片。这个图片的链接是从 shields.io 中生成的。
这段代码的渲染效果如下：
可替换文本对齐方式
在 react-shields 组件中，默认情况下左侧文本和右侧文本是左对齐的。但是在某些情况下，我们可能希望左侧文本或右侧文本靠右对齐。这时候可以通过 leftAlign 和 rightAlign 属性分别指定左侧文本和右侧文本的对齐方式。
下面是一个例子：
-- -------------------- ---- -------
------ ------- ---- ----------------
-------- ----- -
------ -
---- ----------------
--------
-------------- ------
---------------- ------
-----------
-----------------
------------------
--
------
--
-上面的代码中，我们设置了左侧文本为 left align，右侧文本为 right align，背景颜色为 red，并将左侧文本和右侧文本的对齐方式都设置为靠右对齐。
这段代码的渲染效果如下：
结语
react-shields 是一个非常优秀的 React 组件库，可以帮助我们在项目中轻松绘制各种样式的徽章。本文介绍了 react-shields 的使用方法及一些技巧，相信读者已经可以自如地在自己的项目中使用了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557a781e8991b448d4ac9