摘要：最近在項(xiàng)目中要用到組件實(shí)現(xiàn)進(jìn)度條和畫圓環(huán)。最后，本人決定是否可以通過修改源碼實(shí)現(xiàn)旋轉(zhuǎn)效果，對(duì)組件的研究發(fā)現(xiàn)可以對(duì)組件加上一個(gè)屬性，實(shí)現(xiàn)圓環(huán)旋轉(zhuǎn)效果。最后附上本人在上的的評(píng)論，以及代碼定義旋轉(zhuǎn)角度初始化值初始化值

最近在項(xiàng)目中要用到[react-native-percentage-circle][1]組件實(shí)現(xiàn)進(jìn)度條和畫圓環(huán)。UI界面要實(shí)現(xiàn)如下效果

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

    
        
         1990筆                 
        
    

然而要實(shí)現(xiàn)里面圓環(huán)旋轉(zhuǎn)就有點(diǎn)難度了，首先目前該組件最新版本v1.0.6并不支持直接旋轉(zhuǎn)

因此，首先我們想到可能要用的transform來實(shí)現(xiàn)，但實(shí)踐發(fā)現(xiàn)有各種問題。最后，本人決定是否可以通過修改源碼實(shí)現(xiàn)旋轉(zhuǎn)效果，對(duì)組件的index.js研究發(fā)現(xiàn)可以對(duì)組件加上一個(gè)props屬性rotate，實(shí)現(xiàn)圓環(huán)旋轉(zhuǎn)效果。

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

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

第三步：對(duì)if進(jìn)行修改，要同時(shí)修改constructor函數(shù)和componentWillReceiveProps()函數(shù)

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

最后附上本人在git上的Issues的評(píng)論，以及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, //定義旋轉(zhuǎn)角度
  }


  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