1：ProgressViewIOS：為react-native組件自帶的長條形進度條克握。
主要屬性：
`progress`：當前的進度，實現(xiàn)進度變化
`trackTintColor`：進度條的底色匣吊，默認為灰色
`progressTintColor`：進度變化的顏色巩梢，默認藍色
`progressViewStyle`：enum('default', 'bar') default顯示底部顏色寇甸，bar不顯示底部顏色
實現(xiàn)一個ProgressViewIOS進度條：
<ProgressViewIOS style={{marginTop: 20, width: 300}} progress={(this.state.progress2)}
progressTintColor={'#11fffa'}
trackTintColor={'#ff0000'}/>
2：如何像安卓的ProgressBarAndroid實現(xiàn)圓形進度條嘞橙喘？查了下挑庶，發(fā)現(xiàn)有大神已經(jīng)搞定了陆爽，使用react-native-percentage-circle組件什往，github連接：https://github.com/JackPu/react-native-percentage-circle
第一步：cd到項目根目錄執(zhí)行命令
`npm i react-native-percentage-circle --save`
第二步：在js文件中
`import PercentageCircle from 'react-native-percentage-circle';`
導(dǎo)入組件
第三步：開始使用啦茶袒，就這樣：
//radius：為半徑
//percent：進度值0-100
//color：進度顏色
<PercentageCircle style={{marginTop: 60}}
radius={45}
percent={this.state.progress3}
color={"#f498db"}>
</PercentageCircle>
執(zhí)行效果如下：
Untitled11.gif
有木有發(fā)現(xiàn)問題：
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);
