加入收藏 | 设为首页 | 会员中心 | 我要投稿 开发网_开封站长网 (http://www.0378zz.com/)- 科技、AI行业应用、媒体智能、低代码、办公协同!
当前位置: 首页 > 教程 > 正文

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

发布时间:2021-06-04 08:45:57 所属栏目:教程 来源:互联网
导读:最近需求需要一个显示百分比的加载条。然而去搜索了很久,没能发现比较满意的组件,只好自己解决了。当然对于大多数前端而言,这个并不是特别难的,可能思路众多,然而面对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%); 

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

(编辑:开发网_开封站长网)

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

    热点阅读