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

Posted 2023-03-15

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

【英文标题】：How to save downloaded files and view in File app using React Native in iOS?

【发布时间】：2019-03-13 16:20:18

【问题描述】：

我正在使用 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 让我得到保存文件的名称路径。但这不会反映在 File 应用程序的任何文件夹中。 我的问题是如何以文件应用程序中显示的方式保存文件。

【问题讨论】：

你得到答案了吗？

检查我的答案以访问 ios 和 android 目录

【参考方案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+'/AppName';
      

        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 和 react-native-fs

【讨论】：

iOS中会保存文件到File APP吗？

是的，它将使用应用程序名称创建一个文件夹，并将显示在文件 app 中

我已经尝试过了，现在它仍然显示在文件应用程序中。