React Native 文件处理 - 删除图像答案

【问题标题】：React Native file handling - delete imageReact Native 文件处理 - 删除图像
【发布时间】：2017-05-12 03:43:38
【问题描述】：

我使用react-native-camera 来点击图片。我在该州存储的相机数据中得到一个文件路径，如：“file:///storage/emulated/0/Pictures/IMG_20161228_021132.jpg”。我可以将其用作使用图像组件“Image source={{uri:this.props.note.imagePath.path}}”显示图像的源，并且它可以正常显示。

现在我想添加删除图像功能。有人可以建议如何使用上述路径在手机中访问此图像并将其从手机中删除。

我检查了react-native-filesystem，但是当我使用在此路径中传递的 checkIfFileExists 函数时，我发现该文件不存在。不知道出了什么问题。

async checkIfFileExists(path) {

const fileExists = await FileSystem.fileExists(path);
//const directoryExists = await FileSystem.directoryExists('my-directory/my-file.txt');
console.log(`file exists: ${fileExists}`);
//console.log(`directory exists: ${directoryExists}`);
}


deleteNoteImage (note) {

console.log(note.imagePath.path);

//check if file exists
this.checkIfFileExists(note.imagePath.path);
//console.log();

note.imagePath = null;
this.updateNote(note);
}

【问题讨论】：

标签： react-native delete-file

【解决方案1】：

所以我可以使用 react-native-fs 来做到这一点

路径需要声明如下：

var RNFS = require('react-native-fs');

const dirPicutures = `${RNFS.ExternalStorageDirectoryPath}/Pictures`;

然后这个函数删除给定图像名称的图像。

  deleteImageFile(filename) {

    const filepath = `${dirPicuturesTest}/${filename}`;

    RNFS.exists(filepath)
    .then( (result) => {
        console.log("file exists: ", result);

        if(result){
          return RNFS.unlink(filepath)
            .then(() => {
              console.log('FILE DELETED');
            })
            // `unlink` will throw an error, if the item to unlink does not exist
            .catch((err) => {
              console.log(err.message);
            });
        }

      })
      .catch((err) => {
        console.log(err.message);
      });
  }

【讨论】：

UIImage 仍然显示一个占位符而不是已删除的图像，系统重新启动后占位符消失。你有没有找到相同的解决方案？
我正在使用react-native-image-crop-picker，它为Pictures 中的图像随机命名。所以我不知道图像名称，那么如何删除此文件夹中的所有内容

【解决方案2】：

虽然已经回答了，但是对于这个问题的任何人，你也可以使用react-native fetch-blob

RNFetchBlob.fs.unlink(path)
 .then(() => { ... })
 .catch((err) => { ... })

【讨论】：

配置这个看似松散维护的库很痛苦，但仍然没有为我解决问题。我想我需要尝试其他建议 (file.split('///').pop())

【解决方案3】：

我也使用了react-native-fs。但是我没有重新创建文件路径，而是使用了react-native-camera@

已经给我的文件

const file = 'file:///storage/emulated/0/Pictures/IMG_20161228_021132.jpg'
const filePath = file.split('///').pop()  // removes leading file:///

RNFS.exists(filePath)
  .then((res) => {
    if (res) {
      RNFS.unlink(filePath)
        .then(() => console.log('FILE DELETED'))
    }
  })

【讨论】：

'FILE DELETED'的控制台后面缺少一个括号。
已修复。谢谢@Murtuza
我收到文件已删除，但文件仍保留在图库中，没有图像竞赛
我也面临同样的消息“文件已删除”，但它仍然存在于库中。
我有同样的问题，删除后尝试了RNFS.scanFile(path)，但黑色图像仍然存在于图像库中。 RNFS.unlink(path) .then((success) => { console.log('FILE DELETED', success); RNFS.scanFile(path) .then(() => console.log('path scanned')) .catch(() => console.log('error scanning path')); }) .catch((err) => { console.log(err.message); });