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

时间:2020-05-16 xinganbu124 人气:0

本文介绍了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的属性
1. animationType - 动画类型
2. transparent - 是否透明
3. progressModalVisible - 是否可见
4. onShow - 弹框出现
5. 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;

加载全部内容