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>
#####然后刷新下，效果如下：
嘿嘿嘿，搞定了，以下是我的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);
网友评论