使用 antd-mobile 封装的 react-native ProgressAlert组件

ProgressAlert.js

import React from 'react';
import {
    StyleSheet,
    View,
    Text
} from 'react-native';

import { Modal, Progress } from 'antd-mobile';
import PropTypes from 'prop-types';

export default class ProgressAlert extends React.Component {
    constructor (props) {
        super(props);

    }

    static propTypes = {
        /**
         * 进度条显示的文本
         */
        text: PropTypes.string,
        /**
         * 进度条的进度，取值范围为0-100
         */
        percent: PropTypes.number.isRequired,

    };

    render () {
        const { text, percent } = this.props;
        let visible = false;
        if (percent > 0) {
            visible = true;
        } else if (percent >= 100) {
            visible = false;
        }
        let hasTextStyle = {};
        if (text) {
            hasTextStyle = {
                paddingBottom: 0,
                paddingTop: 0
            };
        }
        return (
            <Modal transparent visible={visible} style={[ styles.modal, hasTextStyle ]}>
                <View style={{ flex: 1 }}>
                    <Progress percent={percent} position="normal"/>
                    {text ? <Text style={styles.text}>{text}</Text> : null}
                </View>
            </Modal>
        )
    }

}

const styles = StyleSheet.create({
    modal: {
        width: 200,
        height: 100,
        justifyContent: 'center',
    },
    text: { marginTop: 10, textAlign: 'center' }
});