如何使用iOS中的React Native保存下载的文件并在File应用程序中查看？

Question

我正在使用react-native-fs从服务器下载文件并保存。下载它们后，我将使用react-native-file-viewer打开它们。此过程完全可以正常工作：我可以在查看器中下载并打开它，但是我不能从查看器将文件保存在“文件”应用程序中，尽管可以在iCloud中保存但不能在iPhone中保存。下载的文件存储在

之类的位置

/var/mobile/Containers/Data/Application/CCF6CD16-A62A-48BB-92F3-3021195CFE0C/Documents/react-native-pdf.pdf

但文件应用程序中未显示。

我用于下载和查看文件的代码如下

    RNFS.downloadFile({
      fromUrl: 'http://www.mywebsite.com/react-native-pdfurl.pdf',
      toFile: `${RNFS.DocumentDirectoryPath}/react-native-pdfurl.pdf`,
    }).promise.then((r) => {
      console.log('yo yo yo ');
      this.setState({ isDone: true });

      const path = `${RNFS.DocumentDirectoryPath}/react-native-pdfurl.pdf`;
      FileViewer.open(path)
      .then(() => {
          // success
      })
      .catch(error => {
          // error
      });

      RNFS.readDir(RNFS.DocumentDirectoryPath).then(files => {
          console.log(files);
      })
        .catch(err => {

            console.log(err.message, err.code);

        });
    });

readDir为我获取保存文件的名称路径。但这不会反映在“文件”应用程序的任何文件夹中。我的问题是如何保存文件在文件应用程序中显示的方式。

Answer 1

下面的代码下载文件并打开它。如果文件已经存在，它将直接打开它。

      downloadOpenClick = async (item) => {

    try {

      let platformName = 'ios';
      if (Platform.OS === 'ios'){
        platformName = 'ios';
      }else{
        platformName = 'android';
      }

      const selectedFile = item;

      var dirType=null;
      if(Platform.OS === 'ios'){
        dirType = RNFS.DocumentDirectoryPath;

      }else{
        await this.requestStoragePermission();
        dirType = RNFS.ExternalStorageDirectoryPath+'/Bein';
      }

        RNFS.mkdir(dirType+`/Folder`).then(files => {
          RNFS.mkdir(dirType+`/Folder/SubFolder`).then(files => {
              //console.log(files);
          }).catch(err => {

              //console.log(err.message, err.code);

          });
        }).catch(err => {

            //console.log(err.message, err.code);

        });

        var exists = false;
        RNFS.exists(`${dirType}/Folder/SubFolder/${selectedFile}`).then( (output) => {
            if (output) {
                exists = true;
                const path = `${dirType}/Folder/SubFolder/${selectedFile}`;
                FileViewer.open(path)
                .then(() => {
                    // success
                })
                .catch(error => {
                    // error
                    console.log('error');
                    console.log(error);
                });
            } else {
              const selectedFileUrl = selectedFile.replace(/\s/g, '%20');

              RNFS.downloadFile({
                fromUrl: `https://mywebsite/api/getAttachment?selectedFile=${selectedFileUrl}`,
                toFile: `${dirType}/Folder/SubFolder/${selectedFile}`,
                background: true,
                begin: (res) => {
                  console.log(res);
                  this.setState({ contentLength: res.contentLength});
                },
                progress: (res) => {
                      this.setState({ showSpinner: true });
                      var prog = res.bytesWritten/res.contentLength
                      this.setState({ downloaded : prog});
                      console.log(this.state.downloaded);
                }
              }).promise.then((r) => {
                //console.log(r);
                this.setState({ showSpinner: false });
                this.setState({ downloaded : 0});
                const path = `${dirType}/${tipoDesc}/${oggetto}/${selectedFile}`;
                FileViewer.open(path)
                .then(() => {
                    // success
                })
                .catch(error => {
                    // error
                    console.log('error');
                    console.log(error);
                });
              }).catch(error => {
                console.log('error');
                console.log(error);
              });;
             }
        });




      } catch (error) {
        console.log('error');
        console.log(error);
      }
  };

使用中

react-native-file-viewer and react-native-fs