react native 下载进度框-带百分比进度

react native开发中，下载进度提示框，使用modal实现
效果如下：

其中：util中的size为屏幕的宽高，width: Dimensions.get(‘window’).width,height: Dimensions.get(‘window’).height,

源码如下：
‘use strict’
import {
View,
Text,
StyleSheet,
TouchableOpacity,
Image,
ScrollView,
Modal,
} from ‘react-native’;

import React, { Component } from ‘react’;
import { Fetch } from ‘c2-mobile’

import Util from ‘…/utils/Utils’;
import Bar from ‘./download/Bar’;

class Segmented extends Component {

constructor(props) {
    super(props);
    this.state = {
        percentage: this.props.percentage ? this.props.percentage : false,//默认不展示百分比
        title: this.props.title ? this.props.title : '文件下载中……',
        total: this.props.total ? this.props.total : 1,//文件中大小，由于需要放在分母计算，因此，默认值设置为1
        progress: this.props.progress ? this.props.progress : 0,
        radius: this.props.radius ? this.props.radius : 7,
        // visible: this.props.visible ? true : false,
        onRequestClose:this.props.onClose ? this.props.onClose : ()=>{}
    }
    
}

onRequestClose(){

}

render() {
    // const {
    //     animationType,
    //     transparent,
    //     onRequestClose,
    //     progress,
    //     progressModalVisible,
    //     totalPackageSize,
    //     receivedPackageSize,
    //   } = this.props;
    return (
        
            
                
                    
                        
                            {this.state.title}
                        
                    
                    
                        
                        
                            {/* {this.props.progress}K/{this.props.total}K */}
                            {Math.floor(this.props.progress/this.props.total * 100)}%
                        
                    
                
            
        

    )
}

}

let styles = StyleSheet.create({
// 默认进度条背景底色
barBackgroundStyle: {
backgroundColor: ‘#e0e0e0’
},
})

module.exports = Segmented;

bars文件：
import React, { PureComponent } from ‘react’;
import {
View,
Animated,
} from ‘react-native’;
import PropTypes from ‘prop-types’;

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 (

backgroundColor: ‘#0080ff’,
height: 10,
borderRadius: 20,
width: this.progress.interpolate({
inputRange: [0, 100],
outputRange: [0, 1 * this.props.style.width],
}) }}
/>

);
}
}

Bar.propTypes = propTypes;

export default Bar;

styles文件：
import { StyleSheet } from ‘react-native’;

// 进度条modal样式
export default StyleSheet.create({
imageBg: {
width: 780,
height: 224,
justifyContent: ‘center’,
alignItems: ‘center’
},
progressBarView: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘rgba(0,0,0,0.2)’
},
// 默认进度条背景底色
barBackgroundStyle: {
backgroundColor: ‘#e0e0e0’
},
subView: {
width: 780,
height: 296,
backgroundColor: ‘#fff’,
alignItems: ‘center’,
justifyContent: ‘center’
},
bottomContainer: {
width: 780,
height: 39,
borderBottomLeftRadius: 26,
borderBottomRightRadius: 26,
backgroundColor: ‘#FFF’
},
textPackageSize: {
fontSize: 40,
color: ‘#686868’,
marginTop: 36
},
title: {
color: ‘#FFF’,
fontSize: 45
}
});