本文共 1621 字，大约阅读时间需要 5 分钟。

最近需求需要一个显示百分比的加载条。然而去搜索了很久，没能发现比较满意的组件，只好自己解决了。对于大多数前端而言，这个并不是特别难的任务，可能思路众多，但面对React Native却有点相形见绌。解决这样的问题，我们还是得回到前端本身，看看有什么可以嫁接的方案。

前端常规制作进度条方法

前端实现相对容易。我们可以用Canvas绘制圆，也可以用SVG绘制。SVG主要是通过<circle>元素进行绘制。我们先绘制第一个圆作为底色。接下来绘制一个带有色彩的圆（注意不要填充颜色fill="none"）。需要了解两个关键属性：

• stroke-dasharray：用于控制路径绘制中的虚线和间距。例如，圆的周长。
• stroke-dashoffset：用于指定距离虚线绘制的起点。

如果我们知道了这个，圆的周长可以通过公式计算：CircleLength = R * 2 * Math.PI。百分比偏移量为PercentOffset = -CircleLength * yourPercent。然后将这个第二个圆赋予到style中：style="stroke-dashoffset: -93.9336; stroke-dasharray: 375.734;"。

SVG相对来说还算是比较易用的解决方案。

使用 CSS渐变

还有一个更加直接的方法，就是利用 CSS3中的linear-gradient。例如：

background-image: linear-gradient(90deg, transparent 50%, #16a085 50%);

这样我们可以通过设置旋转的角度和间隔来实现渐变效果。代码示例如下：

.circle1 {  position: relative;  width: 110px;  height: 110px;  border-radius: 100%;  background-color: #eee;  background-image: linear-gradient(90deg, transparent 50%, #16a085 50%);}

使用 CSS Transform

如果要用Transform，可以采用以下方案。通过设置transform-origin，我们可以绕指定点旋转元素。代码示例如下：

.left-wrap {  overflow: hidden;  position: absolute;  left: 0;  top: 0;  width: 50%;  height: 100%;}.left-wrap .loader {  position: absolute;  left: 100%;  top: 0;  width: 100%;  height: 100%;  border-radius: 1000px;  background-color: #333;  transform-origin: 0 50% 0;}

React Native实现方案

在React Native中实现百分比加载条可以借助现有的组件。例如，可以使用react-native-percentage-circle。安装命令如下：

npm i react-native-percentage-circle --save

然后在代码中使用：

import PercentageCircle from 'react-native-percentage-circle';

示例代码如下：

参数说明

• color：颜色字符串，例如'#000'。
• percent：百分比数，例如30。
• radius：圆的半径，例如20。

当然，除了以上参数，你还可以根据需求自定义其他属性。如有建议或改进，欢迎提PR，共同完善这个组件。

转载地址：http://gyod.baihongyu.com/