1：ProgressViewIOS：为react-native组件自带的长条形进度条。
主要属性：
`progress`：当前的进度，实现进度变化
`trackTintColor`：进度条的底色，默认为灰色
`progressTintColor`：进度变化的颜色，默认蓝色
`progressViewStyle`：enum('default', 'bar') default显示底部颜色，bar不显示底部颜色
实现一个ProgressViewIOS进度条：
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：进度颜色
执行效果如下：
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属性
{this.props.disabledText}
);
}
return (
//这里增加this.props.pstyle属性
{this.props.children ? this.props.children :
{this.props.percent}% }
);
}
}
// set some attributes default value
PercentageCircle.defaultProps = {
bgcolor: '#e3e3e3',
innerColor: '#fff'
};
module.exports = PercentageCircle;
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(
显示progressView
)
}
}
AppRegistry.registerComponent('RNProgressView', ()=>RNProgressView);