React Native中使用RNFS读取JSON文件遇到问题求助

阿华AIGC实验室

2026-5-22

我明白你遇到的痛点了——用RNFS成功写入JSON文件后，常规的import或者json-loader根本读不到内容对吧？这是因为RNFS写的文件存放在设备的本地文件系统里，而import是用来读取项目打包时就包含的静态资源，完全不是一个路子～

正确读取RNFS写入的JSON文件的方法

核心原因

RNFS写入的文件是APP运行后生成的动态存储文件，存放在设备的文档目录（DocumentDirectoryPath），而import只能读取打包阶段就嵌入APP包的静态资源，所以肯定读不到。你得用RNFS自带的读取方法来操作。

1. 先统一文件路径（避免拼写错误）

把文件路径定义成常量，确保写入和读取时用同一个路径：

import RNFS from 'react-native-fs';
import moment from 'moment';

// 定义统一的文件路径
const TEST_FILE_PATH = RNFS.DocumentDirectoryPath + '/test.json';

2. 优化你的写入代码（用async/await更清晰）

const writeTestJson = async () => {
  const obj = { date: moment().format(), counter: 0 };
  const jsonStr = JSON.stringify(obj);
  
  try {
    await RNFS.writeFile(TEST_FILE_PATH, jsonStr, 'utf8');
    console.log('文件写入成功！');
  } catch (err) {
    console.error('写入失败：', err.message);
  }
};

3. 用RNFS.readFile读取并解析JSON

读取后记得用JSON.parse把字符串转回对象：

const readTestJson = async () => {
  try {
    // 读取文件内容（utf8格式）
    const fileContent = await RNFS.readFile(TEST_FILE_PATH, 'utf8');
    // 解析成JSON对象
    const data = JSON.parse(fileContent);
    
    console.log('读取到的内容：', data);
    return data; // 可以把数据返回给业务逻辑使用
  } catch (err) {
    console.error('读取失败：', err.message);
    // 如果文件不存在，这里可以做默认值处理
    return { date: '', counter: 0 };
  }
};