Показать прогресс в загрузке в реакции-родной?
Хотите заблокировать экран и показать окно прогресса загрузки, например, функциональность загрузки файлов 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>
);
}
}
Я могу загрузить файл, и он открывается автоматически, но перед этим я хочу показать прогресс загрузки.
Пожалуйста, предложите любое решение, если кто-нибудь знает. заранее спасибо