React Native Expo：如何读写应用目录外的外部文件？

可以实现对应用目录外的文件夹（如下载、图片文件夹）的读写，但要根据你使用的Expo工作流（Managed/Bare）选择不同方案，以下是具体操作：

一、Managed Workflow（纯Expo，未 eject） #

纯Expo环境下无法直接访问任意外部目录，但可以借助官方提供的库来处理常用场景：

1. 访问/写入系统相册（图片文件夹） #

使用expo-image-picker读取相册文件，配合expo-media-library将文件写入相册：

import * as ImagePicker from 'expo-image-picker';
import * as MediaLibrary from 'expo-media-library';

// 从相册选择图片并读取
const pickGalleryImage = async () => {
  const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
  if (status !== 'granted') {
    alert('需要授予相册访问权限才能继续');
    return;
  }
  
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: false,
  });
  
  if (!result.canceled) {
    // 选中图片的URI，可用于后续读取操作
    const imageUri = result.assets[0].uri;
    console.log('选中图片路径:', imageUri);
  }
};

// 将图片保存到相册
const saveImageToGallery = async (imageUri) => {
  const { status } = await MediaLibrary.requestPermissionsAsync();
  if (status !== 'granted') {
    alert('需要授予相册写入权限');
    return;
  }
  
  await MediaLibrary.saveToLibraryAsync(imageUri);
  alert('图片已保存到相册');
};

2. 访问下载文件夹/任意外部文件 #

使用expo-document-picker调用系统文件选择器，让用户手动选择外部文件（包括下载文件夹内的文件），获取临时URI进行读取：

import * as DocumentPicker from 'expo-document-picker';
import * as FileSystem from 'expo-file-system';

const pickExternalFile = async () => {
  const result = await DocumentPicker.getDocumentAsync({
    type: '*/*', // 允许选择所有类型文件
    copyToCacheDirectory: true, // 将文件复制到应用缓存目录，方便后续操作
  });
  
  if (result.type === 'success') {
    // 读取文件内容
    const fileContent = await FileSystem.readAsStringAsync(result.uri);
    console.log('文件内容:', fileContent);
  }
};

注意：Managed模式下无法直接写入外部文件夹，若要导出文件，可使用expo-sharing调用系统分享功能，让用户自行选择保存到外部目录。

二、Bare Workflow（已 eject 或初始选择Bare模式） #

Bare模式下可以结合原生代码或第三方库直接操作外部目录，灵活性更高：

1. Android端操作 #

首先在AndroidManifest.xml中添加对应权限：

<!-- Android 12及以下 -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="32" />

<!-- Android 13+ 细粒度权限 -->
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
<uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />

然后使用react-native-fs库直接访问外部目录：

import RNFS from 'react-native-fs';

// 获取下载文件夹内的文件列表
const getDownloadFolderFiles = async () => {
  try {
    const files = await RNFS.readDir(RNFS.DownloadDirectoryPath);
    console.log('下载文件夹文件:', files.map(file => file.name));
  } catch (err) {
    console.error('读取下载文件夹失败:', err);
  }
};

// 写入文件到下载文件夹
const writeToDownloadFolder = async () => {
  const filePath = `${RNFS.DownloadDirectoryPath}/demo.txt`;
  try {
    await RNFS.writeFile(filePath, '这是写入外部文件夹的内容', 'utf8');
    alert('文件已成功写入下载文件夹');
  } catch (err) {
    console.error('写入文件失败:', err);
  }
};

2. iOS端操作 #

iOS沙盒机制限制较多，无法直接访问任意外部目录，但可以通过以下方式处理：

• 用expo-document-picker或原生UIDocumentPickerViewController让用户选择外部文件
• 访问相册可使用expo-media-library或原生PhotoKit
• 若要导出文件，可启用iCloud文档功能，或让用户通过系统文件应用选择保存位置

核心限制总结 #

• Managed模式下仅能通过用户交互（文件选择器、相册选择）读取外部文件，无法主动写入外部目录
• Android 13+和iOS 14+对权限管控更严格，必须申请对应细粒度权限，并向用户说明权限用途
• Expo官方FileSystem仅能访问应用沙盒内路径，外部文件操作必须依赖上述第三方库或原生实现

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