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;

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