React Native中fetch与rn-fetch-blob冲突致response.json()报错

你完全猜中了问题根源——rn-fetch-blob会默认覆盖全局的fetch方法，这就是为什么集成它之后，哪怕调用公开测试接口，原生fetch的response.json()都会抛出空指针异常。它替换后的fetch返回的response对象和原生结构完全不一致，原生的json解析方法自然就失效了。

我之前也踩过这个坑，下面给你几个优先级从高到低的可行解决方案：

方案1：隔离使用，不覆盖全局fetch #

如果你只是用rn-fetch-blob处理图片上传，完全没必要让它替换全局fetch。修改你的导入和使用方式，把两个功能的网络请求彻底分开：

// 图片上传单独用RNFetchBlob的API
import RNFetchBlob from 'rn-fetch-blob';

const uploadImage = async (imageUri) => {
  const formData = new FormData();
  formData.append('image', {
    uri: imageUri,
    name: 'upload.jpg',
    type: 'image/jpeg'
  });

  const uploadResponse = await RNFetchBlob.fetch(
    'POST',
    '你的图片上传接口',
    { 'Content-Type': 'multipart/form-data' },
    formData
  );
  // 处理上传结果
};

// 支付请求继续用原生fetch，不受影响
const initiatePaystackPayment = async (paymentData) => {
  try {
    const response = await fetch('你的Paystack支付接口', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(paymentData)
    });
    const result = await response.json(); // 现在能正常解析了
    // 后续支付逻辑处理
  } catch (err) {
    console.error('支付请求出错:', err);
  }
};

方案2：统一用RNFetchBlob处理所有网络请求 #

如果你不想区分两个fetch，也可以直接用RNFetchBlob的API处理支付请求，它的响应解析方式和原生fetch略有不同，但能避免冲突：

const initiatePaystackPayment = async (paymentData) => {
  try {
    const response = await RNFetchBlob.fetch(
      'POST',
      '你的Paystack支付接口',
      { 'Content-Type': 'application/json' },
      JSON.stringify(paymentData)
    );
    // 用RNFetchBlob自带的.json()方法解析响应
    const result = response.json();
    // 后续支付逻辑处理
  } catch (err) {
    console.error('支付请求出错:', err);
  }
};

方案3：恢复原生fetch（兜底方案） #

如果之前的配置已经让rn-fetch-blob覆盖了全局fetch，可以在App启动时手动恢复原生fetch：

import { Platform } from 'react-native';
import RNFetchBlob from 'rn-fetch-blob';

// 先保存原生fetch的引用
const originalFetch = global.fetch;

// 初始化RNFetchBlob但不覆盖全局fetch
if (Platform.OS === 'android') {
  RNFetchBlob.config({
    // 这里填你的Android相关配置，比如缓存路径等
  });
}

// 把原生fetch放回全局
global.fetch = originalFetch;

需要注意的是，部分版本的rn-fetch-blob默认就会替换全局fetch，所以方案1是最稳妥的——只在图片上传场景使用它的API，完全不碰全局的fetch环境。

测试的时候可以先单独跑支付请求的代码，确认原生fetch正常后再集成图片上传逻辑，这样更容易定位问题。

内容的提问来源于stack exchange，提问作者Nkoro Joseph Ahamefula