对react-native-percentage-circle修改，实现圆环旋转一定角度

最近在项目中要用到[react-native-percentage-circle][1]组件实现进度条和画圆环。UI界面要实现如下效果

可以看出要实现两个圆环嵌套，实现同心圆还是比较简单的，react-native-percentage-circle组件支持子元素，所以，在外面圆环里面嵌套一个同心圆环，然后设置样式就行了。具体代码如下：

<PercentageCircle radius={70} percent={100} color={'#ffffff'} bgcolor={"#ffffff"} innerColor={"#ffffff"} borderWidth={8}>
    <View style={{flex:1,justifyContent:'center',alignItems: 'center',}}>
        <PercentageCircle radius={60} percent={49} rotate={10} bgcolor={'#ff912f'} color={"#ffac48"} innerColor={"#ffffff"} borderWidth={15}>
        <Text style={{fontFamily: "MicrosoftYaHei",fontSize: 22,lineHeight: 27,color: "#545453"}}> 1990笔</Text>                 
        </PercentageCircle>
    </View>
</PercentageCircle>

然而要实现里面圆环旋转就有点难度了，首先目前该组件最新版本v1.0.6并不支持直接旋转

因此，首先我们想到可能要用的transform来实现，但实践发现有各种问题。最后，本人决定是否可以通过修改源码实现旋转效果，对组件的index.js研究发现可以对组件加上一个props属性rotate，实现圆环旋转效果。

第一步：在PercentageCircle类propTypes中添加一个rotate属性。

第二步：在constructor中定义一个新的变量rotate。

第三步：对if进行修改

NOTE：这里rotate本人未设定值范围，但建议0-50，如果大于50，失去了意义，可以通过背景颜色改变，大家在代码中可以自己设定rotate的取值范围。

最后附上本人在git上的Issues的评论

对react-native-percentage-circle修改，实现圆环旋转一定角度

相关文章