最近在项目中使用[react-native-percentage-circle][1]组件实现进度条绘制圆圈。UI界面需要实现如下效果。可以看出，实现两个环和同心圆的嵌套还是比较简单的。react-native-percentage-circle组件是支持子元素的，所以在外圈Ring里面嵌套一个同心圆，然后设置样式就行了。具体代码如下：<查看样式={{flex:1,justifyContent:'center',alignItems:'center',}}>1990笔画不过要实现内圆的旋转有点难度。首先，该组件最新版本v1.0.6不支持直接旋转。因此，首先我们想到了可能使用transform来实现，但是实践发现存在各种问题。最后决定是否可以通过修改源码实现旋转效果。研究了组件的index.js后，发现可以在组件中添加一个props属性rotate来实现圆环旋转的效果。第1步：将旋转属性添加到PercentageCircle类propTypes。第二步：在构造函数中定义一个新的变量rotate。第三步：修改if，同时修改构造函数和componentWillReceiveProps()函数注意：这里不设置rotate的取值范围，建议0-50。如果大于50，它将失去意义。您可以通过背景颜色更改它。可以在代码中自行设置rotate的取值范围。最后附上本人在git上的Issues的评论，以及index.js代码/**ReactNativePercentageCircle**@githubhttps://github.com/JackPu/react-native-percentage-circle**ReactNativeVersion>=0.25**固定React本机版本**/importReact,{Component}from'react';import{StyleSheet,View,Text,}from'react-native';conststyles=StyleSheet.create({circle:{overflow:'hidden',position:'relative',justifyContent:'center',alignItems:'center',backgroundColor:'#e3e3e3',},leftWrap:{overflow:'hidden',position:'absolute',top:0,},rightWrap:{position:'absolute',},loader:{position:'absolute',left:0,top:0,borderRadius:1000,},innerCircle:{overflow:'hidden',position:'relative',justifyContent:'center',alignItems:'center',},text:{fontSize:11,color:'#888',},});classPercentageCircleextendsComponent{propTypes:{color:React.PropTypes}。细绳，bgcolor：React.PropTypes.string，innerColor：React.PropTypes.string，radius：React.PropTypes.number，百分比：React.PropTypes.number，borderWidth：React.Proptypes.number，textStyle：React.Proptypes.array，禁用：React.PropTypes.bool,rotate:React.Proptypes.number,//确定旋转角度}constructor(props){super(props);让百分比=this.props.percent;让leftTransformerDegree='0deg';让rightTransformerDegree='0deg';//初始值letrotate=this.props.rotate;如果（typeofrotate=='undefined'）{rotate=0;}if(percent>=50){//rightTransformerDegree='180deg';//leftTransformerDegree=(percent-50)*3.6+'deg';rightTransformerDegree=180+rotate*3.6+'deg';leftTransformerDegree=(percent+rotate-50)*3.6+'deg';}else{//rightTransformerDegree=percent*3.6+'deg';rightTransformerDegree=(percent+rotate-50)*3.6+'deg';leftTransformerDegree=rotate*3.6+'deg';}this.state={percent:this.props.percent,borderWidth:this.props.borderWidth<2||!this.props.borderWidth？2:this.props.borderWidth,leftTransformerDegree:leftTransformerDegree,rightTransformerDegree:rightTransformerDegree,textStyle:this.props.textStyle?this.props.textStyle:null};}componentWillReceiveProps(nextProps){让percent=nextProps.percent;让leftTransformerDegree='0deg';让rightTransformerDegree='0deg';/*if(percent>=50){rightTransformerDegree='180deg';leftTransformerDegree=(percent-50)*3.6+'deg';}else{rightTransformerDegree='0deg';leftTransformerDegree=-(50-percent)*3.6+'deg';}*///初始值letrotate=this.props.rotate;如果（typeofrotate=='undefined'）{rotate=0;}if(percent>=50){//rightTransformerDegree='180度';//leftTransformerDegree=(percent-50)*3.6+'deg';rightTransformerDegree=180+rotate*3.6+'deg';leftTransformerDegree=(percent+rotate-50)*3.6+'deg';}else{//rightTransformerDegree=percent*3.6+'deg';rightTransformerDegree=(percent+rotate-50)*3.6+'deg';leftTransformerDegree=rotate*3.6+'deg';}this.setState({percent:this.props.percent,borderWidth:this.props.borderWidth<2||!this.props.borderWidth?2:this.props.borderWidth,leftTransformerDegree:leftTransformerDegree,rightTransformerDegree:rightTransformerDegree});}render(){if(this.props.disabled){return({this.props.disabledText});}return({this.props.children?this.props.children:{this.props.percent}%});}}//设置一些属性默认值valuePercentageCircle.defaultProps={bgcolor:'#e3e3e3',innerColor:'#fff'};module.exports=PercentageCircle;s://github.com/JackPu/react-native-percentage-圆圈
