怎么在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
modal的props - 这些都是modal的属性
animationType - 动画类型
transparent - 是否透明
progressModalVisible - 是否可见
onShow - 弹框出现
onRequestClose - 弹框请求消失(比如安卓按返回键会触发这个方法)
onOutSidePress - 点击弹框外部动作
title - 弹框的标题
cancleText - 取消的文字
canclePress - 取消动作
needCancle - 是否需要取消按钮
使用代码
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;看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
