React Native实现进度条弹框

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.2)'
    },barStyle: {
        marginLeft: 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',paddingBottom: 5,title: {
        textAlign: 'left',padding:10,fontSize: 16
    },cancleButton: {
        padding:10
    },cancleText: {
        textAlign: 'right',paddingTop: 0,fontSize: 16,color: 'rgba(0,1)'
    }
});

export default ProgressBarDialog;

props

• modal的props - 这些都是modal的属性
  
  • animationType - 动画类型
  • transparent - 是否透明
  • progressModalVisible - 是否可见
  • onShow - 弹框出现
  • onRequestClose - 弹框请求消失(比如安卓按返回键会触发这个方法)
• onOutSidePress - 点击弹框外部动作
• title - 弹框的标题
• cancleText - 取消的文字
• canclePress - 取消动作

• 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;