React Native用PapaParse解析CSV遇Network request failed错误求助

报错TypeError: Network request failed的核心原因是：React Native里fetch不能用相对路径直接访问本地assets文件，这种写法会被当成网络请求处理，而实际上本地asset资源的访问方式和Web环境完全不同。

方案一：使用require加载本地CSV（推荐简单场景） #

1. 修改解析代码 #

将parseCSV方法中的fetch逻辑替换为require加载：

async parseCSV() {
  try {
    // 直接用require加载assets下的CSV文件
    const csvData = require('./assets/data.csv').default;
    
    Papa.parse(csvData, {
      header: true,
      complete: this.getData
    });
  } catch (error) {
    console.error('Error parsing CSV file:', error);
  }
}

2. 配置Metro支持CSV文件 #

Metro默认不识别CSV格式的资源，需要修改metro.config.js添加支持：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  resolver: {
    assetExts: [...getDefaultConfig(__dirname).resolver.assetExts, 'csv'],
  },
});

方案二：使用react-native-fs读取本地文件（适合大文件或复杂场景） #

如果CSV文件体积较大，或者需要更灵活的文件操作，可以使用react-native-fs库：

1. 安装依赖 #

npm install react-native-fs --save
# 或
yarn add react-native-fs

2. 修改解析代码 #

import RNFS from 'react-native-fs';

async parseCSV() {
  try {
    // 获取打包后assets文件的绝对路径
    const filePath = RNFS.MainBundlePath + '/assets/data.csv';
    const csvData = await RNFS.readFile(filePath, 'utf8');
    
    Papa.parse(csvData, {
      header: true,
      complete: this.getData
    });
  } catch (error) {
    console.error('Error parsing CSV file:', error);
  }
}

额外检查项 #

• 确认data.csv确实存在于项目根目录的assets文件夹中，路径拼写无错误
• 若使用Expo，确保assets已在app.json的assets数组中声明：

{
  "expo": {
    "assets": ["./assets/data.csv"]
  }
}

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