React Native Expo如何读取assets文件夹中的本地CSV文件？

问题描述 #

在React Native项目中尝试读取assets文件夹下的本地CSV文件（wienerlinien.csv），代码位于HomeScreen.tsx：

useEffect(() => {
    Papa.parse(require('../assets/wienerlinien.csv'), {
        delimiter: ';',
        header: true,
        newline: "\r\n",
        complete: (result) => {
            console.log(result);
            // 输出 {data: Array(0), errors: Array(0), meta: {…}} 
        }
    });
})

遇到的异常：

• Web端：输出空数据对象
• Android端：提示Unable to resolve "../assets/wienerlinien.csv" from "screens\HomeScreen.tsx"

但同一文件夹下的图片可正常加载：

<Image source={require('../assets/profile.jpg')} style={styles.profileImage}/>

CSV文件示例内容：

"HALTESTELLEN_ID";"TYP";"DIVA";"NAME";"GEMEINDE";"GEMEINDE_ID";"WGS84_LAT";"WGS84_LON";"STAND"
214460106;"stop";60200001;"Schrankenberggasse";"Wien";90001;48.1738010728644;16.3898072745249;""
214460107;"stop";60200002;"Achengasse";"Wien";90001;48.2845258075837;16.4488984539143;""

解决方案 #

1. 配置Metro打包器支持CSV文件 #

React Native的Metro默认不会打包CSV这类非标准资源，需修改metro.config.js（无则新建）添加CSV格式支持：

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

const config = {};

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

修改后重启Metro服务，确保配置生效。

2. 正确读取并解析CSV内容 #

require加载CSV返回的是资源URI而非文件内容，Papa.parse无法直接解析，需先获取文件文本：

跨平台方案（使用react-native-fs）

先安装依赖：

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

修改代码：

import React, { useEffect } from 'react';
import Papa from 'papaparse';
import RNFS from 'react-native-fs';
import { Platform } from 'react-native';

const HomeScreen = () => {
  useEffect(() => {
    const loadCSV = async () => {
      const csvResource = require('../assets/wienerlinien.csv');
      let filePath = csvResource.uri;

      // Android端需补充file协议前缀
      if (Platform.OS === 'android') {
        filePath = `file://${filePath}`;
      }

      try {
        // 读取文件内容
        const csvContent = await RNFS.readFile(filePath, 'utf8');
        // 解析CSV
        Papa.parse(csvContent, {
          delimiter: ';',
          header: true,
          newline: "\r\n",
          complete: (result) => {
            console.log('解析结果:', result.data);
          },
          error: (err) => console.error('解析失败:', err)
        });
      } catch (err) {
        console.error('读取文件失败:', err);
      }
    };

    loadCSV();
  }, []);

  return (
    // 你的界面代码
  );
};

export default HomeScreen;

轻量化方案（Web端用fetch，Native端用react-native-fs）

若不想额外安装库，Web端可直接用fetch读取：

useEffect(() => {
  const loadCSV = async () => {
    if (Platform.OS === 'web') {
      const response = await fetch(require('../assets/wienerlinien.csv'));
      const csvContent = await response.text();
      Papa.parse(csvContent, {
        delimiter: ';',
        header: true,
        newline: "\r\n",
        complete: (result) => console.log('Web端解析结果:', result.data)
      });
    } else {
      // 此处复用上面Native端的react-native-fs读取逻辑
    }
  };

  loadCSV();
}, []);

3. 验证文件路径 #

打印require('../assets/wienerlinien.csv')查看返回值，确认URI是否有效，同时确保路径层级与图片的require路径完全一致。

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