怎么在React中利用Native实现一个进度条弹框

怎么在React中利用Native实现一个进度条弹框？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

我们提供的服务有：做网站、网站设计、微信公众号开发、网站优化、网站认证、眉山ssl等。为1000+企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的眉山网站制作公司

首先实现进度条。

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 (
      
        
      
    );
  }
}

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 (
      
        
          
            
              {title}
            
            
            
              
                {`${progress}`}%
              
              
                {`${progress}`}/100
              
            
            {needCancle &&
              
                
                  
                    {cancleText}
                  
                
              
            }
          
        
      
    );
  }
}

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 (
      
        
      
    )
  }
}

export default Upload;

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。