React Native实现进度条弹框的示例代码

本文介绍了React Native实现进度条弹框，分享给大家

我们在上传或者下载文件时候，希望有一个进度条弹框去提醒用户取当前正在上传或者下载，也允许用去取点击取消上传或者下载。

首先实现进度条。

class Bar extends PureComponent {

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。

实现进度条弹框。

const {
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}>

{title} {`${progress}`}% {`${progress}`}/100 {needCancle && {cancleText} } ); } }

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的属性
1. animationType - 动画类型
2. transparent - 是否透明
3. progressModalVisible - 是否可见
4. onShow - 弹框出现
5. onRequestClose - 弹框请求消失(比如安卓按返回键会触发这个方法)
onOutSidePress - 点击弹框外部动作
title - 弹框的标题
cancleText - 取消的文字
canclePress - 取消动作
needCancle - 是否需要取消按钮

使用代码

import ProgressBarDialog from './ProgressBarDialog';

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;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

React Native实现进度条弹框的示例代码

首先实现进度条。

实现进度条弹框。

props

猜你在找的JavaScript相关文章