React-Native ProgressViewIOS与圆形进

1：ProgressViewIOS：为react-native组件自带的长条形进度条。
主要属性：

`progress`：当前的进度，实现进度变化

`trackTintColor`：进度条的底色，默认为灰色

`progressTintColor`：进度变化的颜色，默认蓝色

`progressViewStyle`：enum('default', 'bar')  default显示底部颜色，bar不显示底部颜色

实现一个ProgressViewIOS进度条：

<ProgressViewIOS style={{marginTop: 20, width: 300}} progress={(this.state.progress2)}
                                 progressTintColor={'#11fffa'}
                                 trackTintColor={'#ff0000'}/>

2：如何像安卓的ProgressBarAndroid实现圆形进度条嘞？查了下，发现有大神已经搞定了，使用react-native-percentage-circle组件，github连接：https://github.com/JackPu/react-native-percentage-circle

第一步：cd到项目根目录执行命令
`npm i react-native-percentage-circle --save`

第二步：在js文件中
`import PercentageCircle from 'react-native-percentage-circle';`
导入组件

第三步：开始使用啦，就这样：

//radius：为半径
//percent：进度值0-100
//color：进度颜色
<PercentageCircle style={{marginTop: 60}}
                                  radius={45}
                                  percent={this.state.progress3}
                                  color={"#f498db"}>
                </PercentageCircle>

执行效果如下：

Untitled11.gif

有木有发现问题：

1：PercentageCircle的style属性无效
2：为啥进度开始的时候从左下方开始读条，而且显示进度条变没了？？？

于是进到react-native-percentage-circle组件，准备查找问题，解决后的代码：

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,
//在这里增加一个属性，用来提供style
      pstyle: React.PropTypes.array,
  }

  constructor(props) {
    super(props);

    let percent = this.props.percent;
    let leftTransformerDegree = '0deg';
    let rightTransformerDegree = '0deg';
    if (percent >= 50) {
      rightTransformerDegree = '180deg';
      leftTransformerDegree = (percent - 50) * 3.6 + 'deg';
    } else {
      rightTransformerDegree = percent * 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) {
//这里改成和constructor一样的判断
    let percent = nextProps.percent;
      let leftTransformerDegree = '0deg';
      let rightTransformerDegree = '0deg';
      if (percent >= 50) {
          rightTransformerDegree = '180deg';
          leftTransformerDegree = (percent - 50) * 3.6 + 'deg';
      } else {
          rightTransformerDegree = percent * 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.pstyle属性
        <View style={[styles.circle, this.props.pstyle, {
          width:this.props.radius*2,
          height: this.props.radius*2,
          borderRadius:this.props.radius
        }]}>
          <Text style={styles.text}>{this.props.disabledText}</Text>
        </View>
      );
    }
    return (
//这里增加this.props.pstyle属性
      <View style={[styles.circle, this.props.pstyle, {
        width:this.props.radius*2,
        height: this.props.radius*2,
        borderRadius:this.props.radius,
        backgroundColor: this.props.bgcolor
      }]}>
        <View style={[styles.leftWrap,{
          width: this.props.radius,
          height: this.props.radius * 2,
          left:0,
        }]}>
          <View style={[styles.loader,{
            left: this.props.radius,
            width:this.props.radius,
            height: this.props.radius*2,
            borderTopLeftRadius:0,
            borderBottomLeftRadius:0,
            backgroundColor:this.props.color,
            transform:[{translateX:-this.props.radius/2},{rotate:this.state.leftTransformerDegree},{translateX:this.props.radius/2}],  
          }]}></View>
        </View>
        <View style={[styles.leftWrap,{
          left:this.props.radius,
          width: this.props.radius,
          height: this.props.radius * 2,
        }]}>
          <View style={[styles.loader,{
            left:-this.props.radius,
            width:this.props.radius,
            height: this.props.radius*2,
            borderTopRightRadius:0,
            borderBottomRightRadius:0,
            backgroundColor: this.props.color,
//这里的判断取消
            transform:[{translateX:this.props.radius/2},{rotate:this.state.rightTransformerDegree},{translateX:-this.props.radius/2}],  
          }]}></View>
        </View>
        <View style={[styles.innerCircle,{
              width:(this.props.radius - this.state.borderWidth)*2, 
              height:(this.props.radius - this.state.borderWidth)*2,
              borderRadius:this.props.radius - this.state.borderWidth,
              backgroundColor: this.props.innerColor,
            }]}>
          {this.props.children ? this.props.children :
            <Text style={[styles.text, this.state.textStyle]}>{this.props.percent}%</Text>}
        </View>

      </View>
    );
  }
}

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

module.exports = PercentageCircle;

</pre>

#####然后刷新下，效果如下：

![Untitled12.gif](https://img.haomeiwen.com/i5708383/409a4aab6b81ab5f.gif?imageMogr2/auto-orient/strip)

嘿嘿嘿，搞定了，以下是我的js代码
<pre>
import React, { Component } from 'react';
import {
    AppRegistry,
    View,
    ProgressViewIOS,
    Text
} from 'react-native';

import PercentageCircle from 'react-native-percentage-circle';

export default class RNProgressView extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            progress: 0,
            progress2: 0,
            progress3: 10,
        }
    }
    componentDidMount() {
        this.timer1 = setInterval(
            ()=>{
                this.updateProgress();
            },
            1000,
        );
    }
    updateProgress = ()=>{
        console.log('updateProgress111111');
        let progress = this.state.progress + 0.01;
        let progress2 = this.state.progress2 + 0.1;
        let progress3 = this.state.progress3 + 10;
        if (progress > 1) {
            progress = 0
        }
        if (progress2 > 1){
            progress2 = 0
        }
        if (progress3 > 100){
            progress3 = 0
        }


        this.setState({
            progress: progress,
            progress2: progress2,
            progress3: progress3
        });


    };
    getProgress = (offset)=>{
        console.log('getProgress2222222');
        let progress = this.state.progress + offset;
        return progress
    };
    render() {
        return(
            <View style={{flex: 1, backgroundColor: '#aaaaaa', alignItems:'center', justifyContent:'center'}}>
                <Text> 显示progressView </Text>
                <ProgressViewIOS style={{marginTop: 20, width: 300}} progress={this.getProgress(0)}/>
                <ProgressViewIOS style={{marginTop: 20, width: 300}} progress={this.getProgress(0.06)}
                                 progressTintColor={'#11fffa'}
                                 trackTintColor={'#ff0000'}/>
                <ProgressViewIOS style={{marginTop: 20, width: 300, transform:[{scaleY:2.5}]}}
                                 progress={(this.state.progress2)}
                                 progressTintColor={'#faff00'}
                                 progressViewStyle={'bar'}/>

                <PercentageCircle pstyle={{marginTop: 60}}
                                  radius={45}
                                  percent={this.state.progress3}
                                  color={"#f498db"}>

                </PercentageCircle>
            </View>
        )
    }
}
AppRegistry.registerComponent('RNProgressView', ()=>RNProgressView);