删除特定扩展名的文件

Question

我已经使用react native RNFS库访问我的手机的文件系统。我可以使用文件名删除文件。例如，

 import React, { Component } from "react";
 import { Text, View } from "react-native";
 var RNFS = require("react-native-fs");
 var path = RNFS.ExternalDirectoryPath + "/abc.png";

 export default class HelloWorldApp extends Component {
   render() {
      return (
         RNFS.unlink(path)
         .then(() => {
            console.log("FILE DELETED");
            console.log(path);
         })

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

在这里，名称为abc.png的文件将被删除。

问题1-但是假设如果要删除所有具有特定扩展名（例如.txt，.png）的文件，那么我该如何实现？

问题2-使用此代码，尽管我能够删除文件，但在控制台中却出现错误。

 Invariant Violation: Objects are not valid as a React child (found: 
 object with keys {_40, _65, _55, _72}). If you meant to render a 
 collection of children, use an array instead.
  in HelloWorldApp (at renderApplication.js:34)
  in RCTView (at View.js:45)
  in View (at AppContainer.js:98)
  in RCTView (at View.js:45)
  in View (at AppContainer.js:115)
  in AppContainer (at renderApplication.js:33)

我已使用本文档编写代码-https://github.com/itinance/react-native-fs

Answer 1

您可以使用readdir获取文件名，然后将要删除的文件传递给unlink
此错误是因为您没有返回组件。 render()方法期望将react组件作为其返回值。

Answer 2

当您从render(){}返回的内容必须为JSX时，您无法渲染RNFS，因为它不是JSX。

return (
         RNFS.unlink(path)
         .then(() => {
            console.log("FILE DELETED");
            console.log(path);
         })

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

我不确定您要渲染什么，但这就是为什么出现此错误的原因。

Objects are not valid as a React child的意思是“您不能渲染对象”，要渲染某些东西，它必须是JSX
（例如<Text>hey<Text>）

Answer 3

删除特定扩展名的文件

可以删除具有特定扩展名的文件，该扩展名涉及的部分很少，但并不太复杂。要实现这一目标，我们需要完成一些步骤。

获取目录中所有文件的列表
过滤列表，以便仅保留具有我们要删除的扩展名的文件。
取消链接列表中的文件。

所以我们可以做这样的事情：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button} from 'react-native';
const RNFS = require('react-native-fs');

export default class App extends Component<Props> {

  deleteFiles = async () => {
    let ext = 'txt'; // extention that we want to delete
    var re = /(?:\.([^.]+))?$/; // regex to get the file extension of the file
    try {
      let path = RNFS.DocumentDirectoryPath;

      let fileList = await RNFS.readDir(path); // get all the files in the directory
      if (fileList.length) {
        let filesToDelete = fileList.filter(file => { 
          let extension = re.exec(file.name)[1] // gets the extension of the found file
          return extension === ext; // check to make sure that each file has the extension that we are looking for
        }); 

        for (const file of filesToDelete) {
          if (file.isFile()) { // only delete if it is a file
            try {
              await RNFS.unlink(file.path);
              console.log(`Successfully deleted ${file.name}`);
            } catch (deleteError) {
              console.log(`Error deleting ${file.name}`);
            }
          }
        }
      } 
    } catch (err) {
      console.warn(err);
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <Button title={'delete files'} onPress={this.deleteFiles} />
      </View>
    );
  }
}

这是一个在屏幕上呈现按钮的简单组件。按下按钮时将调用deleteFiles函数。当前已设置为删除所有扩展名为txt

的文件

错误：始终违反：对象作为React子对象无效

您正在return方法的render内部调用函数。你不应该那样做。实施类似于我上面的操作，其中按一下按钮即可删除文件，或者通过特定操作调用要删除的函数，如果在创建组件时需要删除文件，则应该在内部进行操作componentDidMount而不是render函数中。

componentDidMount () {
  RNFS.unlink(path)
    .then(() => {
        console.log("FILE DELETED");
        console.log(path);
    })
    .catch(err => {
      console.log(err.message);
      console.log(path);
    });
}

反应本机RNFS库

3 个答案:

删除特定扩展名的文件

错误：始终违反：对象作为React子对象无效