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 相关文章推荐
javascript学习笔记(五)正则表达式
Apr 08 Javascript
js猜数字小游戏的简单实现代码
Jul 02 Javascript
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
又一款js时钟!transform实现时钟效果
Aug 15 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
vue addRoutes路由动态加载操作
Aug 04 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
ASP和PHP都是可以删除自身的
2007/04/09 PHP
php heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
python 进程池pool使用详解
2020/10/15 Python
应聘收银员个人的求职信
2013/11/30 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
毕业评语大全
2014/05/04 职场文书
优秀员工推荐信
2014/05/10 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
党支部承诺书
2015/01/20 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers