React Native流式实现问题：如何获取多chunk响应？

一、TypeScript类型缺失的临时解决 #

react-native-fetch-api和react-native-polyfill-globals没有官方@types包，手写声明文件即可快速解决：

1. 在项目根目录创建typings/react-native-fetch-api.d.ts：

declare module 'react-native-fetch-api' {
  export function fetch(input: RequestInfo, init?: RequestInit & {
    reactNative?: { textStreaming: boolean };
  }): Promise<Response>;
}

2. 创建typings/react-native-polyfill-globals.d.ts：

declare module 'react-native-polyfill-globals/auto' {
  // 仅声明模块存在，无需具体类型定义
}

3. 修改tsconfig.json，添加自定义声明路径：

{
  "compilerOptions": {
    "typeRoots": ["./typings", "./node_modules/@types"]
  }
}

二、流式仅返回单个Chunk的排查与解决 #

这不是React Native的固有限制，从以下方向逐一排查：

1. 优先确认服务器端分块输出逻辑 #

这是最常见的问题根源：

• 检查响应头是否包含Transfer-Encoding: chunked
• 确保服务器是边生成数据边发送，而非等待完整内容生成后一次性返回。比如Node.js环境下，要使用res.write()分块输出，不能直接用res.send()返回完整内容。

如果服务器未做流式输出，客户端自然只能拿到一个完整Chunk。

2. 调整react-native-fetch-api请求配置 #

• 显式添加请求头：根据服务器返回的Content-Type，添加Accept: text/event-stream或Accept: application/json，明确告知客户端支持流式响应
• 再次确认reactNative: { textStreaming: true }配置无拼写错误

3. 换用更可靠的流式处理库 #

如果react-native-fetch-api的流式支持不稳定，可以尝试react-native-blob-util，它对流式响应的处理更成熟：

import RNBlobUtil from 'react-native-blob-util';

const streamBotResponse = async () => {
  const response = await RNBlobUtil.fetch('GET', 'URL...', {
    // 你的请求头配置
  });

  const reader = response.readStream();
  reader.open();
  reader.onData((chunk) => {
    console.log(new TextDecoder().decode(chunk));
  });
  reader.onEnd(() => {
    reader.close();
  });
};

4. 抓包验证数据流 #

用Charles或Wireshark抓包，确认服务器是否真的分块发送数据。如果抓包显示服务器分块输出，但客户端只收到一个Chunk，再排查客户端库的处理逻辑。

结论 #

不用放弃流式功能，先从服务器端输出逻辑入手排查，再调整客户端配置或换用更成熟的库，即可实现分块接收响应。

内容的提问来源于stack exchange，提问作者Elco