React Native中Firebase Storage文件内容下载与展示问题

一、XMLHttpRequest代码原理拆解 #

你看到打印4条xhr日志，是因为XHR请求有多个状态阶段（readyState），每个状态变化都会触发回调：

• readyState=1：已调用open()方法，连接建立
• readyState=2：已发送请求，收到响应头
• readyState=3：正在接收响应主体
• readyState=4：请求完成，响应就绪

只有当readyState=4且status=200时，才是成功拿到了文件内容。之前的日志是状态变化的触发记录，不用管前面几条，只需要关注最终完成的那个状态。文件内容会存在XHR实例的responseText（文本类文件）或response（对应设置的responseType）属性里。

二、完整实现代码 #

1. 单个文件内容下载函数 #

封装一个Promise风格的函数，专门处理单个URL的文件内容获取：

const fetchFileContent = (fileUrl) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', fileUrl, true);
    // 根据文件类型设置响应类型：文本用'text'，JSON用'json'，二进制用'blob'
    xhr.responseType = 'text';
    // 请求成功完成时触发
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.responseText); // 这里就是文件的文本内容
      } else {
        reject(new Error(`请求失败，状态码：${xhr.status}`));
      }
    };
    // 网络错误时触发
    xhr.onerror = () => {
      reject(new Error('网络请求出错'));
    };
    xhr.send();
  });
};

2. 批量加载文件夹内所有文件内容 #

结合你已实现的获取文件URL的逻辑，批量下载并存储内容：

// 假设你已经有获取文件夹内所有文件URL的函数getFolderFileUrls
const loadAllFiles = async () => {
  try {
    // 第一步：获取文件夹内所有文件的URL列表（你已实现的逻辑）
    const fileUrls = await getFolderFileUrls();
    // 第二步：批量下载每个文件的内容
    const fileContents = await Promise.all(fileUrls.map(url => fetchFileContent(url)));
    // 第三步：把内容存到组件状态里，用于后续展示
    setFileContents(fileContents);
  } catch (err) {
    console.error('加载文件内容失败：', err);
  }
};

3. 在组件中展示内容 #

用React Native的基础组件渲染所有文件内容：

import { useState, useEffect } from 'react';
import { View, Text, ScrollView, StyleSheet } from 'react-native';

export default function FileContentViewer() {
  const [fileContents, setFileContents] = useState([]);

  // 组件挂载时加载文件
  useEffect(() => {
    loadAllFiles();
  }, []);

  return (
    <ScrollView style={styles.container}>
      {fileContents.map((content, idx) => (
        <View key={idx} style={styles.fileCard}>
          <Text style={styles.fileTitle}>文件 {idx + 1}</Text>
          <Text style={styles.fileContent}>{content}</Text>
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#fff',
  },
  fileCard: {
    marginBottom: 16,
    padding: 12,
    backgroundColor: '#f8f8f8',
    borderRadius: 8,
  },
  fileTitle: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 8,
  },
  fileContent: {
    fontSize: 14,
    color: '#333',
  },
});

额外说明 #

• 如果是JSON格式的文件，把responseType改成json，xhr.response会直接返回解析后的JSON对象，不用自己再JSON.parse
• 如果是图片、视频这类二进制文件，不需要下载内容，直接用Image或对应的媒体组件加载URL即可
• 若遇到跨域问题：确保Firebase Storage的规则允许你读取这些文件，并且URL是有效的公开或授权访问链接

内容的提问来源于stack exchange，提问作者L.Calvin