先上效果图
实现
在RN中,要实现环形进度条效果,一般都是需要借助chart图实现;最近做RN项目,经过折腾,发现react-native-circular-progress这个组件几乎能完美的解决。故分享出来,废话不多说了,直接上代码
1、react-native-circular-progress组件Circle.js的封装
import React, { PureComponent } from 'react';
import {StyleSheet, View, Dimensions} from 'react-native';
import { AnimatedCircularProgress } from 'react-native-circular-progress';
import PropTypes from 'prop-types';
const { width } = Dimensions.get(`window`);
const styles = StyleSheet.create({
container: {
alignItems: `center`
},
text: {
backgroundColor: `transparent`
},
content: {
borderColor: `#96DEE8`,
borderBottomWidth: 1,
paddingBottom: 5,
paddingHorizontal: 5,
marginBottom: 5
}
});
export default class Circle extends PureComponent {
static propTypes = {
warn: PropTypes.number,
mount: PropTypes.number,
name: PropTypes.string,
tintColor : PropTypes.string,
backgroundColor : PropTypes.string,
textOne : PropTypes.string,
textTwo : PropTypes.string,
}
static defaultProps = {
warn: 0,
mount: 0,
name: ``,
tintColor : '2196F3',
backgroundColor : '#9E9E9E',
textOne : '',
textTwo : ''
}
render() {
const { warn, mount, name,tintColor,backgroundColor,textOne,textTwo } = this.props;
return (
<View style={[styles.container, {width: (width - 30)/2, paddingBottom: 10}]}>
<AnimatedCircularProgress
size={130}
width={8}
backgroundWidth={6}
fill={mount === 0 ? 0 : mount * 100 / (mount + warn)}
tintColor= {tintColor}
backgroundColor= {backgroundColor}
arcSweepAngle={360}
rotation={180}
lineCap="square"
>
{() => (
<View style={{ alignItems: `center` }}>
<Text style={[styles.text, { fontWeight: `bold`, fontSize: 20 }]}>{warn}</TextView>
<View style={styles.content}>
<Text style={[styles.text, { fontSize: 11 }]}>{textOne}</Text>
</View>
<Text style={[styles.text, { fontWeight: `bold`, fontSize: 14 }]}>{mount}</Text>
<Text style={[styles.text, { fontSize: 11 }]}>{textTwo}</Text>
</View>
)}
</AnimatedCircularProgress>
</View>
);
}
}
2、调用
import Circle from 'Circle.js';
<Circle
key={`circle_one`}
mount={120}
warn={15}
name={`test`}
tintColor = {`#FFC30F`}
backgroundColor = {`#606266`}
textOne = {`正常`}
textTwo = {`故障`}
/>