怎样利用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%); 

下图为潜匿掉遮挡的小圆的样子。

（编辑：湖南网）

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