React-Native:如何在下载文件时显示进度？

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

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

  componentDidMount() {
    this.downloadFile();
  }

  downloadFile() {
    const fileUrl = 'http://example.com/file.zip'; // 替换为要下载的文件URL
    const xhr = new XMLHttpRequest();
    xhr.open('GET', fileUrl, true);
    xhr.responseType = 'blob';

    xhr.onprogress = (event) => {
      if (event.lengthComputable) {
        const progress = Math.round((event.loaded / event.total) * 100);
        this.setState({ progress });
      }
    };

    xhr.onload = () => {
      if (xhr.status === 200) {
        const blob = xhr.response;
        // 处理下载完成后的文件
      }
    };

    xhr.send();
  }

  render() {
    return (
      <View>
        <Text>下载进度：{this.state.progress}%</Text>
        <ProgressBarAndroid styleAttr="Horizontal" progress={this.state.progress / 100} indeterminate={false} />
      </View>
    );
  }
}

export default DownloadScreen;