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

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

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

首先实现进度条。

import React, {
PureComponent
} from 'react';
import {
StyleSheet,
View,
Animated,
Easing,
} from '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 (
<View style={[styles.background, this.props.backgroundStyle, this.props.style]}>
<Animated.View style={[styles.fill, this.props.fillStyle, { width: this.progress.interpolate({
inputRange: [0, 100],
outputRange: [0 * this.props.style.width, 1 * this.props.style.width],
})} ]}
/>
</View>
);
}
}
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。

实现进度条弹框。

import React, {
PropTypes,
PureComponent
} from 'react';
import {
View,
StyleSheet,
Modal,
Text,
Dimensions,
TouchableOpacity
} from 'react-native';
import Bar from './Bar';
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}>
<View style={styles.progressBarView}>
<View style={styles.subView}>
<Text style={styles.title}>
{title}
</Text>
<Bar
ref={this.refBar}
style={{marginLeft: 10,marginRight: 10,width:width - 80}}
progress={progress}
backgroundStyle={styles.barBackgroundStyle}
/>
<View style={styles.progressContainer}>
<Text style={styles.progressLeftText}>
{`${progress}`}%
</Text>
<Text style={styles.progressRightText}>
{`${progress}`}/100
</Text>
</View>
{needCancle &&
<View style={styles.cancleContainer}>
<TouchableOpacity style={styles.cancleButton} onPress={canclePress}>
<Text style={styles.cancleText}>
{cancleText}
</Text>
</TouchableOpacity>
</View>
}
</View>
</View>
</Modal>
);
}
}
const styles = StyleSheet.create({
progressBarView: {
flex:1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.2)'
},
barStyle: {
marginLeft: 10,
marginRight: 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',
padding: 10,
paddingBottom: 5,
justifyContent: 'space-between'
},
title: {
textAlign: 'left',
padding:10,
fontSize: 16
},
cancleButton: {
padding:10
},
cancleText: {
textAlign: 'right',
paddingTop: 0,
fontSize: 16,
color: 'rgba(0, 122, 255, 1)'
}
});
export default ProgressBarDialog;

props

1. modal的props - 这些都是modal的属性 animationType - 动画类型
2. transparent - 是否透明
3. progressModalVisible - 是否可见
4. onShow - 弹框出现
5. onRequestClose - 弹框请求消失(比如安卓按返回键会触发这个方法)

使用代码

import React , {
PureComponent
} from 'react';
import {
View
} from 'react-native';
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 (
<View>
<ProgressBarDialog
ref={this.refProgressBar}
progress={this.state.progress}
progressModalVisible={this.state.progressModalVisible}
onRequestClose={this.onProgressRequestClose}
canclePress={this.canclePress}
needCancle={true}
/>
</View>
)
}
}
export default Upload;

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

您可能感兴趣的文章:

• react-native 圆弧拖动进度条实现的示例代码