本文介紹了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,0,0.2)'  },  barStyle: {    marginLeft: 10,    marginRight: 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',    padding: 10,    paddingBottom: 5,    justifyContent: 'space-between'  },  title: {    textAlign: 'left',    padding:10,    fontSize: 16  },  cancleButton: {    padding:10  },  cancleText: {    textAlign: 'right',    paddingTop: 0,    fontSize: 16,    color: 'rgba(0, 122, 255, 1)'  }});export default ProgressBarDialog;