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也能包含文件
Oct 26 Javascript
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
告诉你什么是javascript的回调函数
Sep 04 Javascript
javascript解决IE6下hover问题的方法
Jul 28 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
小程序自动化测试的示例代码
Aug 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连接数据库代码应用分析
2011/05/29 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
WordPress JQuery处理沙发头像
2009/06/22 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
window.location不跳转的问题解决方法
2014/04/17 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
Bootstrap插件全集
2016/07/18 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
Python实现发送email的几种常用方法
2014/08/18 Python
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
Python中数字以及算数运算符的相关使用
2015/10/12 Python
替换python字典中的key值方法
2018/07/06 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
医院后勤自我鉴定
2013/10/13 职场文书
大学生自我鉴定
2013/12/08 职场文书
求职简历中自我评价
2014/01/28 职场文书
2015年招聘工作总结
2014/12/12 职场文书
教师个人年度总结
2015/02/11 职场文书
靠谱准确的求职信
2019/04/02 职场文书
Python进行区间取值案例讲解
2021/08/02 Python
速龙x4-860k处理器相当于i几
2022/04/20 数码科技