在React Native中使用rn-fetch-blob无法保存文件的问题

你遇到的问题核心是Android 10及以上存储机制变更，以及当前保存路径属于App私有沙盒目录导致的：

问题根源 #

1. 你当前把图片存在DocumentDir，这是App的私有沙盒目录，系统默认禁止文件管理器、相册等第三方应用访问，所以在设备上找不到该文件。
2. WRITE_EXTERNAL_STORAGE权限在Android 10+已被弱化，无法直接获取公共存储的全面访问权限；Android 13+更是需要改用READ_MEDIA_IMAGES权限来访问媒体文件。

解决步骤 #

1. 切换到公共图片目录保存 #

将保存路径改为系统公共图片目录PictureDir，该目录是系统默认的媒体存储位置，文件管理器和相册可直接访问。

2. 触发媒体扫描 #

保存文件后，必须通知系统扫描新文件，否则系统不会立刻将其加入相册或文件索引。

3. 更新权限配置 #

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

<!-- Android 12及以下版本 -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="32" />
<!-- Android 13+版本 -->
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />

修改后的代码 #

import { Button, View, PermissionsAndroid } from 'react-native';
import React from 'react';
import ImagePicker from 'react-native-image-crop-picker';
import RNFetchBlob from 'rn-fetch-blob';

export default function App() {
  // 请求存储权限
  const requestStoragePermission = async () => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
        {
          title: '存储权限申请',
          message: '需要访问存储权限来保存图片',
          buttonNeutral: '稍后再说',
          buttonNegative: '取消',
          buttonPositive: '确定',
        },
      );
      return granted === PermissionsAndroid.RESULTS.GRANTED;
    } catch (err) {
      console.warn(err);
      return false;
    }
  };

  const saveLocalImage = async (localImagePath: string, destinationPath: string) => {
    try {
      await RNFetchBlob.fs.cp(localImagePath, destinationPath);
      console.log('Image saved at:', destinationPath);
      
      // 触发媒体扫描，让系统识别新图片
      RNFetchBlob.android.mediaScanFile(destinationPath, 'image/jpeg', (error) => {
        if (error) {
          console.error('媒体扫描失败:', error);
        } else {
          console.log('图片已被系统索引');
        }
      });
    } catch (error) {
      console.error('Error saving image:', error);
    }
  };

  async function pickImage() {
    const hasPermission = await requestStoragePermission();
    if (!hasPermission) {
      console.log('未获取存储权限，无法保存图片');
      return;
    }

    ImagePicker.openPicker({
      cropping: true,
      freeStyleCropEnabled: true,
    }).then(image => {
      const sourceUri = image.path;
      const timestamp = new Date().getTime();
      // 改用公共图片目录
      const destinationPath = `${RNFetchBlob.fs.dirs.PictureDir}/${timestamp}.jpg`;
      saveLocalImage(sourceUri, destinationPath);
    }).catch(err => {
      console.error('图片选择失败:', err);
    });
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button
        onPress={pickImage}
        title="Pick image"
        color="#841584"
        accessibilityLabel="选择并裁剪图片"
      />
    </View>
  );
}

额外说明 #

• 若必须将文件存在私有目录且需要用户访问，可通过文件分享功能导出到公共目录，或使用FileProvider提供访问，但逻辑相对复杂。
• Android 13+的权限申请可根据系统版本判断，动态切换申请READ_MEDIA_IMAGES权限。

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