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 相关文章推荐
js兼容标准的表格变色效果
Jun 28 Javascript
用js做一个小游戏平台 (一)
Dec 29 Javascript
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 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过滤html标记属性类用法实例
2014/09/23 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
2017/06/01 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
JavaScript如何判断input数据类型
2020/02/06 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
王纯业的Python学习笔记 下载
2007/02/10 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
python ETL工具 pyetl
2020/06/07 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
员工培训邀请函
2014/02/02 职场文书
我为自己代言广告词
2014/03/18 职场文书
青年文明号创建承诺
2014/03/31 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
进口业务员岗位职责
2014/04/06 职场文书
MySQL读取JSON转换的方式
2022/03/18 MySQL