摘要：最近在項目中要用到組件實現進度條和畫圓環。最后，本人決定是否可以通過修改源碼實現旋轉效果，對組件的研究發現可以對組件加上一個屬性，實現圓環旋轉效果。最后附上本人在上的的評論，以及代碼定義旋轉角度初始化值初始化值

最近在項目中要用到[react-native-percentage-circle][1]組件實現進度條和畫圓環。UI界面要實現如下效果

可以看出要實現兩個圓環嵌套，實現同心圓還是比較簡單的，react-native-percentage-circle組件支持子元素，所以，在外面圓環里面嵌套一個同心圓環，然后設置樣式就行了。具體代碼如下：   

    
        
         1990筆                 
        
    

然而要實現里面圓環旋轉就有點難度了，首先目前該組件最新版本v1.0.6并不支持直接旋轉

因此，首先我們想到可能要用的transform來實現，但實踐發現有各種問題。最后，本人決定是否可以通過修改源碼實現旋轉效果，對組件的index.js研究發現可以對組件加上一個props屬性rotate，實現圓環旋轉效果。

第一步：在PercentageCircle類propTypes中添加一個rotate屬性。

第二步：在constructor中定義一個新的變量rotate。

第三步：對if進行修改，要同時修改constructor函數和componentWillReceiveProps()函數

NOTE：這里rotate本人未設定值范圍，但建議0-50，如果大于50，失去了意義，可以通過背景顏色改變，大家在代碼中可以自己設定rotate的取值范圍。

最后附上本人在git上的Issues的評論，以及index.js代碼

/** React Native Percentage Circle
 ** @github  https://github.com/JackPu/react-native-percentage-circle
 ** React Native Version >=0.25
 ** to fixed react native version
 **/

import React, {
  Component
} from "react";
import {
  StyleSheet,
  View,
  Text,
} from "react-native";

const styles = 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",
  },
});

class PercentageCircle extends Component {
  propTypes: {
    color: React.PropTypes.string,
    bgcolor: React.PropTypes.string,
    innerColor: React.PropTypes.string,
    radius: React.PropTypes.number,
    percent: React.PropTypes.number,
    borderWidth: React.Proptypes.number,
    textStyle: React.Proptypes.array,
    disabled: React.PropTypes.bool,
    rotate: React.Proptypes.number, //定義旋轉角度
  }


  constructor(props) {
    super(props);

    let percent = this.props.percent;
    let leftTransformerDegree = "0deg";
    let rightTransformerDegree = "0deg";
    //初始化值
    let rotate = this.props.rotate;
    if (typeof rotate == "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) {
    let percent = nextProps.percent;
    let leftTransformerDegree = "0deg";
    let rightTransformerDegree = "0deg";

    /*
    if (percent >= 50) {
      rightTransformerDegree = "180deg";
      leftTransformerDegree = (percent - 50) * 3.6 + "deg";
    } else {
      rightTransformerDegree = "0deg";
      leftTransformerDegree = -(50 - percent) * 3.6 + "deg";
    }
    */
    //初始化值
    let rotate = this.props.rotate;
    if (typeof rotate == "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.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}%}
        

      
    );
  }
}

// set some attributes default value
PercentageCircle.defaultProps = {
  bgcolor: "#e3e3e3",
  innerColor: "#fff"
};

module.exports = PercentageCircle;

s://github.com/JackPu/react-native-percentage-circle