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

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