本文介绍了React Native实现进度条弹框，分享给大家
我们在上传或者下载文件时候，希望有一个进度条弹框去提醒用户取当前正在上传或者下载，也允许用去取点击取消上传或者下载。
首先实现进度条。
constructor(props) {
super(props);
this.progress = new Animated.Value(this.props.initialProgress || 0);
}
static defaultProps = {
style: styles,easing: Easing.inOut(Easing.ease)
}
componentWillReceiveProps(nextProps) {
if (this.props.progress >= 0 && this.props.progress !== nextProps.progress) {
this.update(nextProps.progress);
}
}
shouldComponentUpdate() {
return false;
}
update(progress) {
Animated.spring(this.progress,{
toValue: progress
}).start();
}
render() {
return (
var styles = StyleSheet.create({
background: {
backgroundColor: '#bbbbbb',height: 5,overflow: 'hidden'
},fill: {
backgroundColor: 'rgba(0,122,255,1)',height: 5
}
});
export default Bar;
进度条的值我们用动画实现，避免使用state不断去重新render渲染界面，同时设置shouldComponentUpdate返回值为false，避免重新render。
实现进度条弹框。
width
} = Dimensions.get('window');
class ProgressBarDialog extends PureComponent {
constructor(props) {
super(props);
}
static propTypes = {
...Modal.propTypes,title: PropTypes.string,canclePress: PropTypes.func,cancleText: PropTypes.string,needCancle: PropTypes.bool
};
static defaultProps = {
animationType: 'none',transparent: true,progressModalVisible: false,onShow: () => {},onRequestClose: () => {},onOutSidePress: () => {},title: '上传文件',cancleText: '取消是',canclePress: () => {},needCancle: true
}
render() {
const {
animationType,transparent,onRequestClose,progress,title,canclePress,cancleText,needCancle,progressModalVisible
} = this.props;
return (
<Modal
animationType={animationType}
transparent={transparent}
visible={progressModalVisible}
onRequestClose={onRequestClose}>
const styles = StyleSheet.create({
progressBarView: {
flex:1,justifyContent: 'center',alignItems: 'center',backgroundColor: 'rgba(0,0.2)'
},barStyle: {
marginLeft: 10,width:width - 80
},progressLeftText: {
fontSize: 14
},cancleContainer: {
justifyContent: 'center',alignItems: 'flex-end'
},progressRightText: {
fontSize: 14,color: '#666666'
},barBackgroundStyle: {
backgroundColor: '#cccccc'
},progressContainer: {
flexDirection: 'row',padding: 10,justifyContent: 'space-between'
},subView: {
marginLeft: 30,marginRight: 30,backgroundColor: '#fff',alignSelf: 'stretch',justifyContent: 'center'
},progressView: {
flexDirection: 'row',paddingBottom: 5,title: {
textAlign: 'left',padding:10,fontSize: 16
},cancleButton: {
padding:10
},cancleText: {
textAlign: 'right',paddingTop: 0,fontSize: 16,color: 'rgba(0,1)'
}
});
export default ProgressBarDialog;
props
- modal的props - 这些都是modal的属性
- animationType - 动画类型
- transparent - 是否透明
- progressModalVisible - 是否可见
- onShow - 弹框出现
- onRequestClose - 弹框请求消失(比如安卓按返回键会触发这个方法)
- onOutSidePress - 点击弹框外部动作
- title - 弹框的标题
- cancleText - 取消的文字
- canclePress - 取消动作
- needCancle - 是否需要取消按钮
使用代码
class Upload extends PureComponent {
constructor(props) {
this.state = {
progress: 0,progressModalVisible: false
};
}
refProgressBar = (view) => {
this.progressBar = view;
}
showProgressBar = () => {
this.setState({
progressModalVisible: true
});
}
dismissProgressBar = () => {
this.setState({
progress: 0,progressModalVisible: false
});
}
setProgressValue = (progress) => {
this.setState({
progress
});
}
onProgressRequestClose = () => {
this.dismissProgressBar();
}
canclePress = () => {
this.dismissProgressBar();
}
render() {
return (
export default Upload;