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 (
        <Modal
            // animationType={animationType}
            transparent={true}
            onRequestClose={this.state.onRequestClose}
            visible={this.props.visible}
            // visible={true}
        >
            <View style={{ flex: 1, backgroundColor: '#00000040', alignItems: 'center',justifyContent:'center' }}>
                <View style={
                    {
                        width: Util.size.width * 0.8,
                        height: Util.size.width * 0.6,
                        backgroundColor: Util.color.colorParamayBG,
                        alignSelf: 'center',
                        justifyContent: 'center',
                        borderRadius: this.state.radius
                    }}>
                    <View style={
                        {
                            flex: 1,
                            justifyContent: 'center',
                            alignItems: 'center',
                            backgroundColor: Util.color.colorParamay,
                            borderTopRightRadius: this.state.radius,
                            borderTopLeftRadius: this.state.radius
                        }}>
                        <Text style={{ color: '#fff', fontSize: 20 }}>
                            {this.state.title}
                        </Text>
                    </View>
                    <View style={{ flex: 2, borderRadius: 7,justifyContent:'center',alignItems:'center'}}>
                        <Bar
                            //   style={{ width: 400, borderRadius: 30 }}
                            style={
                                {
                                    width: Util.size.width * 0.6, 
                                    borderRadius: 30,
                                }}//宽高
                            progress={this.props.progress / this.props.total * 100}
                            // progress={30}
                            backgroundStyle={styles.barBackgroundStyle}
                        />
                        <Text style={{fontSize:16,color:'#666',marginTop:10}}>
                            {/* {this.props.progress}K/{this.props.total}K */}
                            {Math.floor(this.props.progress/this.props.total * 100)}%
                        </Text>
                    </View>
                </View>
            </View>
        </Modal>

    )
}

}

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 (
<View style={[this.props.backgroundStyle, this.props.style]}>
<Animated.View style={{
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
}
});