React Native中如何监听指定文件夹内文件新增、删除变更通知

问题根因 #

你当前将RNFS.readDir逻辑直接写在组件函数体顶层，组件每次渲染都会执行这段逻辑，执行后调用setFileList又会触发组件重新渲染，自然形成无限循环。

解决方案 #

1. 事件驱动触发目录刷新（推荐）

• 第一步：把初始目录读取逻辑封装为独立函数，放在useEffect中仅在组件首次挂载时执行1次，加载初始已有的文件列表：

const [fileList, setFileList] = useState([]);

// 封装读目录刷新列表逻辑
const loadFileList = () => {
  RNFS.readDir(appFolderPath)
    .then(files => setFileList(files))
    .catch(err => console.log(err.message, err.code));
};

useEffect(() => {
  // 组件挂载时仅加载一次初始文件
  loadFileList();
}, []);

• 第二步：在下载任务完成回调、文件删除操作的逻辑末尾，手动调用loadFileList方法刷新列表，仅在有文件变动时才更新：

// 示例下载逻辑
const startDownload = (fileUrl) => {
  const downloadDest = `${appFolderPath}/${Date.now()}_${fileUrl.split('/').pop()}`;
  const downloadTask = RNFS.downloadFile({
    fromUrl: fileUrl,
    toFile: downloadDest,
  });
  
  downloadTask.promise.then(res => {
    if (res.statusCode === 200) {
      // 下载完成后触发列表刷新
      loadFileList();
    }
  }).catch(err => console.log('下载失败', err));
}

• 第三步：跨标签页同步时，可使用全局状态管理（Context、Zustand、Redux等）存储文件列表和下载状态，两个标签页直接从全局状态取数，不需要各自单独读取目录。

2. 目录自动监听

如果不想手动调用刷新，可以使用react-native-fs自带的目录变化监听能力，文件夹内有文件增删时自动触发更新：

useEffect(() => {
  loadFileList();
  // 开启目标目录监听
  RNFS.startObservingDirectory(appFolderPath);
  // 绑定目录变化回调
  const dirListener = RNFS.addListener('directoryDidChange', (event) => {
    if (event.path === appFolderPath) loadFileList();
  });
  
  // 组件卸载时清理监听避免内存泄漏
  return () => {
    RNFS.stopObservingDirectory(appFolderPath);
    dirListener.remove();
  };
}, []);

优化建议 #

正在下载的文件建议单独用状态数组维护，不需要通过读目录获取：你可以在触发下载时把任务信息（文件名、进度、任务ID等）存到downloadingList状态中，下载完成后从该数组移除，再触发已完成列表的更新，这样下载进度展示更流畅，也不需要频繁读取磁盘。

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