放一张运行截图来说明一下怎么做。react-native-percentage-circle项目地址最近需要一个显示百分比的加载栏。但是找了半天也没找到满意的元件，只好自己解决了。当然，对于大多数前端来说，这并不是特别困难，可能会有很多想法，但和ReactNative相比就显得有点小巫见大巫了。解决这样的问题，还是要回到前端本身，看看有没有嫁接的方案。前端常规制作进度条的方法比较容易实现。我们可以用canvas来画圆，也可以用SVG来画。使用SVG/svg>SVG主要是用Circle绘制的，关于Circle的使用可以看这里。让我们先画第一个圆，作为底色。接下来我们只需要在上面画一个彩色圆圈即可（切记不要填充颜色fill="none"）。这时候，我们需要了解两个关键属性；stroke-dasharray：用于控制路径绘制中的虚线和间距。例子是圆的周长。stroke-dashoffset：用于指定距虚线起点的距离。如果我们知道这些，我们只需要计算圆的周长varCircleLength=R*2*Math.PI;varPercentOffset=－CircleLength*yourPercent;给style赋一个Circle属性：style="stroke-dashoffset:-93.9336;stroke-dasharray:375.734;"SVG是一个比较好用的方案，Demo点击预览；还有一种更直接的方式使用CSS渐变最好的方式是使用CSS3中的linear-gradient：效果如图：我们只需要在line-grdient中指定旋转的角度，然后设置区间的梯度百分比。背景图像：线性渐变（90deg，透明50%，#16a08550%），线性渐变（90deg，#eee50%，透明50%）；下图显示了如何隐藏被遮挡的小圆圈。代码如下：.circle1{position:relative;width:110px;height:110px;border-radius:100%;background-color:#eee;background-image:linear-gradient(90deg,transparent50%,#16a08550%),linear-gradient(90deg,#eee50%,transparent50%);}.circle2{position:relative;top:5px;left:5px;width:100px;height:100px;border-radius:100%;background-color:#fff;}UsingCSSTransform如果要用Transform，这个脑洞比较大，解决方案也很多。今天分享一个比较不烧脑的方案：图3-1图3-2如图我们需要创建一个外圈，用来绘制灰色背景色，然后用一块区域进行层次遮挡（也可以自己用border模拟）。请记住，该属性必须具有overflow:hidden。接下来我们需要添加左右两个隔板，用来放置彩条绘制的容器。如图3-1所示，我们设置了一个左分区，即左半圆，这个半圆与容器的距离为100%，默认是不可见的。然后它需要绕圆心旋转。比较巧妙的是，它需要旋转180度才能回到其父容器的可见区域。同样的方法如图3-2所示，我们可以设置右半圆区域，然后将半圆放置在距离-100%的位置，即右半圆默认也是不可见的。当它开始旋转时，下图红色区域就是我们的角度：注意，由于两个圆是匹配的，所以角度超过了180度，当左半圆开始旋转时，右半圆保持在180度。.left-wrap{overflow:hidden;position:absolute;left:0;top:0;width:50%;height:100%;}.left-wrap.loader{position:absolute;left:100%;top:0；宽度：100%；高度：100%；边框半径：1000px；背景颜色：#333；边框左上角半径：0；边框左下角半径：0；变换原点：050%0;}//省略部分右半区代码.right-wrap{....left:50%;}.right-wrap.loader{...left:-100%;border-bottom-right-radius:0;border-top-right-radius:0;transform-origin:100%50%0;}这些是一些前端解决方案。当然你也可以选择开源框架，比如：用jQueryprogressbar构建的CSS百分比圆圈。js纯CSS百分比圆圈如何用ReactNative写出这样的进度条？有以前的前端想法，所以觉得很容易，但是开始写的时候发现很别扭。SVG的成本比较高，需要安装依赖react-native-art-svg。如果使用渐变，当然比较麻烦，还需要安装依赖。我心里觉得：画个圆有什么意义！！！于是开始自己造轮子，采用了第三种方案，使用view+transform进行组件封装。一开始还挺顺利的，后来看官方文档，发现不支持transformorigin。虽然它支持旋转、缩放和平移，但是当它发现这个缺陷时，无疑是有点为难了。后来发现已经有人向官方提过他的PR，希望得到支持。像transformOrgin:{x:100}这样的东西。当然，最新版本还没有包含在计划中。不过transformMatrix是官方支持的。虽然这样很好，但是楼主的数学很渣。有没有能让渣男快速理解的解决方法？transform-origin属性允许您修改元素转换的原点。例如，rotate()函数的变换原点是旋转中心。（此属性的应用方式是首先通过属性的取反值平移元素，然后应用元素的变换，然后通过属性值平移。）一般含义是，当此属性在进行选择时指定原点时，它将首先翻译元素，然后将其移回。所以我们可以在旋转的时候指定这个：props.radius/2},{rotate:this.state.leftTransformerDegree},{translateX:this.props.radius/2}],}]}>这样就可以解决变换原点自己的问题。这样，写作进步就很容易了。我简单封装了这个组件react-native-percentage-circle，简单开始：npmireact-native-percentage-circle--saveimportPercentageCirclefrom'react-native-percentage-circle';//...redner(){}optiondescriptionPropsTypeExampleDescriptioncolorstring'#000'进度条颜色百分比Number30percentradiusNumber20圆的半径当然是目前我能想到的参数。当然你可以自己写，也可以提交PR扩展。
