React Native项目中本地.csv文件加载失败问题求助

我之前也踩过这个坑！React Native对非图片类的本地静态文件处理逻辑和图片完全不一样，metro bundler默认不识别CSV这类文件，所以直接指定路径肯定会报找不到模块的错误。给你几个亲测有效的解决办法：

方法1：将CSV转成JS模块导出（最简单无依赖） #

这个方法不用装任何第三方库，直接把CSV内容封装成JS变量导出就行：

• 在项目里新建一个比如csvData.js的文件，把你的CSV内容复制进去：

  export const localCsvData = `
  姓名,年龄,城市
  张三,25,北京
  李四,30,上海
  `;
  

• 然后在你的组件里直接导入使用：

  import { localCsvData } from './csvData';
  
  // 可以用papaparse这类库解析CSV
  import Papa from 'papaparse';
  const parsedData = Papa.parse(localCsvData, { header: true });
  console.log(parsedData);
  

方法2：用react-native-fs读取原生资源目录的文件 #

如果不想把CSV转成JS，就用文件系统库读取原生打包的资源：

1. 先安装依赖：

   npm install react-native-fs --save
   

2. 把CSV文件放到对应平台的资源目录：
   • 安卓：放在android/app/src/main/assets文件夹下（没有assets就新建一个）
   • iOS：打开Xcode，把CSV文件拖到项目的Resources文件夹，并且确保在Build Phases -> Copy Bundle Resources里能看到这个文件（如果没有就添加进去）
3. 然后在代码中读取：

   import RNFS from 'react-native-fs';
   
   // 读取安卓assets里的文件
   const readAndroidCsv = async () => {
     try {
       const filePath = RNFS.MainBundlePath + '/your-file.csv';
       const content = await RNFS.readFile(filePath, 'utf8');
       console.log('CSV内容:', content);
     } catch (err) {
       console.error('读取失败:', err);
     }
   };
   
   // 读取iOS Resources里的文件
   const readIosCsv = async () => {
     try {
       const filePath = RNFS.MainBundlePath + '/your-file.csv';
       const content = await RNFS.readFile(filePath, 'utf8');
       console.log('CSV内容:', content);
     } catch (err) {
       console.error('读取失败:', err);
     }
   };
   

方法3：修改metro配置让它支持CSV文件 #

如果你想直接用import导入CSV，可以修改metro的配置，让它识别CSV扩展名：

1. 在项目根目录创建metro.config.js（如果没有的话），添加以下内容：

   const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
   
   const config = {};
   
   module.exports = mergeConfig(getDefaultConfig(__dirname), {
     resolver: {
       sourceExts: [...getDefaultConfig(__dirname).resolver.sourceExts, 'csv'],
     },
   });
   

2. 重启metro bundler，然后就可以直接导入CSV了：

   import csvContent from './your-file.csv';
   console.log(csvContent); // 这里csvContent就是CSV的字符串内容
   

为什么图片能正常加载？
因为React Native的metro bundler默认已经配置了对图片文件（png、jpg等）的处理逻辑，会自动把图片打包到对应平台的资源目录，并且能识别图片的导入路径，但CSV不在默认支持的文件扩展名列表里，所以才会找不到模块。

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