Показать прогресс в загрузке в реакции-родной?

Хотите заблокировать экран и показать окно прогресса загрузки, например, функциональность загрузки файлов Gmail, используя реагирующую-модальную или любым другим способом.

Использование response-native-fetch-blob для загрузки файлов.

  import React, {Component} from 'react';
  import RNFetchBlob from 'react-native-fetch-blob';
  import LoaderPopup from './LoaderPopup';

  class Files extends Component {
   constructor(props) {
     super(props);
      this.state = {
       progress: false,
       percent: 0
    };
  }


   downloadFile(file) {
     var re = /(?:\.([^.]+))?$/;
     var ext = re.exec(file.attachment.file_name)[1];
    if (Platform.OS === 'ios') {
      RNFetchBlob
       .config({
         fileCache: true,
         appendExt: ext,
         notification: true
      })
      .fetch('GET', file.attachment.url)
    .progress({ count: 10 }, (received, total) => {
        if (`${Math.floor(received / total * 100)}% downloaded` !== 100)   {
        this.setState({percent: `${Math.floor(received / total * 100)}% downloaded`});
        this.setState({progress: true});
      }
      this.setState({percent: `${Math.floor(received / total * 100)}% downloaded`});
    })
    .then((res) => {
      this.setState({progress: false});
      console.log('The file saved to ', res.path());
      RNFetchBlob.ios.openDocument(res.path());
    });
}
}
 render() {

   return (
     <View style={{backgroundColor: 'white', flex: 1, marginTop: 1}}>
        <TouchableOpactity>File</TouchableOpacity>
       <LoaderPopup isVisible={this.state.progress}/>
    </View>
   );
}
}

export default Files;

LoaderPopup.js

 class LoaderPopup extends Component {
  render() {
    return (
      <Modal
       swipeDirection={'up'}
       isVisible={this.props.isVisible}
     >
       <View>
        <Text>Downloading Progress</Text>
      </View>
    </Modal>
  );
 }
}

Я могу загрузить файл, и он открывается автоматически, но перед этим я хочу показать прогресс загрузки.

Пожалуйста, предложите любое решение, если кто-нибудь знает. заранее спасибо

0 ответов

Другие вопросы по тегам