react native （附代码）实现热更新下载进度条弹窗Modal

最新推荐文章于 2024-08-09 07:18:05 发布

aijason

最新推荐文章于 2024-08-09 07:18:05 发布

阅读量2k

点赞数 2

分类专栏： react native 文章标签： react react native 进度条进度条弹窗

本文链接：https://blog.csdn.net/u010379595/article/details/83512719

版权

本文介绍如何在React Native项目中创建一个进度条弹窗Modal组件，包括编写进度条Bar和Modal组件，以及如何在项目中集成显示。通过getRealDP方法调整样式，最终展示了一个美观的下载进度条效果。

摘要由CSDN通过智能技术生成

1. 编写进度条Bar组件

import React, { PureComponent } from 'react';
import {
  View,
  Animated,
} from 'react-native';
import PropTypes from 'prop-types';
import { getRealDP } from '../utils/utility';

const propTypes = {
  progress: PropTypes.number.isRequired,
  backgroundStyle: PropTypes.number.isRequired,
  style: PropTypes.object.isRequired,
};

/* 进度条组件 */
class Bar extends PureComponent {

  constructor(props) {
    super(props);
    this.progress = new Animated.Value(0);
    this.update = this.update.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.progress >= 0 && this.props.progress !== nextProps.progress) {
      this.update(nextProps.progress);
    }
  }

  update(progress) {
    Animated.spring(this.progress, {
      toValue: progress
    }).start();
  }

  render() {
    return (
      <View style={[this.props.backgroundStyle, this.props.style]}>