React native RNFS library

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

删除特定扩展的文件

可以用特定的扩展名删除文件，这有点涉及，但并不是太复杂了。我们需要完成几个步骤才能实现它。

1. 获取目录中所有文件的列表
2. 过滤列表，以便只剩下要删除的扩展名的文件。
3. UNINK我们列表中的文件。

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

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 Child

您正在调用render方法的return中的功能。你不应该这样做。要么在按钮的按钮上删除文件上方的内容，要么通过特定操作调用要删除的函数，如果您需要在创建组件时删除文件，则应在内部执行此操作。componentDidMount而不是render功能。

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

Answer 2

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

Answer 3

当您从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>）