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


Posted in Javascript onJuly 17, 2017

本文介绍了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;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
use jscript with List Proxy Server Information
Jun 11 Javascript
JQuery toggle使用分析
Nov 16 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
Jan 17 Javascript
js replace正则表达式应用案例讲解
Jan 17 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
js基于cookie记录来宾姓名的方法
Jul 19 Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
Jun 11 Javascript
小程序自定义弹框效果
Nov 16 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
JavaScript实现前端网页版倒计时
Mar 24 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 #jQuery
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 #Javascript
js实现图片懒加载效果
Jul 17 #Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 #Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 #Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 #Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 #Javascript
You might like
浅析PHP Socket技术
2013/08/02 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
php数组去除空值函数分享
2015/02/02 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
Python psutil模块简单使用实例
2015/04/28 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
电子商务专业学生职业生涯规划
2014/03/07 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
老公保证书范文
2014/04/29 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
出生证明范本
2015/06/15 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript