怎样利用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%); 下图为隐藏掉遮挡的小圆的样子。 (编辑:开发网_开封站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |