怎样利用React Native制作圆形加载条

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

前端常规制作进度条方法

前端实现相对容易点，我们可以用canvas去绘制圆，也可以用SVG去绘制.

使用SVG

<svg style="width:2.8rem" version="1.1" xmlns="" xmlns:xlink="" x="0px" y="0px" viewBox="0 0 130 130" overflow="visible" enable-background="new 0 0 130 130" id="progress"> 

    <circle fill="none" stroke="#ccc" stroke-width="4" stroke-miterlimit="10" cx="64.8" cy="64.8" r="59.8"></circle> 

    <circle class="styled" fill="none" stroke="#2ecc71" stroke-width="4" stroke-miterlimit="10" cx="64.8" cy="64.8" r="59.8" style="stroke-dashoffset: -93.9336; stroke-dasharray: 375.734;"></circle> 

 </svg> 

SVG主要是用Circle进行绘制，关于Circle使用可以看 这里 。我们先绘制***个圆，用于底色。接下来我们只需要在上面绘制一个带有色彩的圆(切记不要填充颜色fill="none")。这个时候我们需要了解两个关键的属性;

stroke-dasharray: 用于控制路径绘制中虚线和间距的。例子中的即圆的周长。

stroke-dashoffset: 用于指定距离虚线绘制的起点

如果我们知道了这个的话，我们只需要计算出圆的周长

var CircleLength = R * 2 * Math.PI; 

var PercentOffset = － CircleLength * yourPercent; 

然后将这个第二个Circle属性赋予到style中：

style="stroke-dashoffset: -93.9336; stroke-dasharray: 375.734;" 

SVG相对来说还算是比较易用的解决方案， Demo点击预览;

使用 CSS渐变

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

效果如图：

我们只需要指定line-grdient中通过旋转的角度然后设置好间隔的渐变百分比就行啦。

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

下图为隐藏掉遮挡的小圆的样子。

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!