如何在 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 為我提供了保存文件的名稱路徑。 但這不會反映在 File 應用程序中的任何文件夾中。 我的問題是如何以文件應用程序中顯示的方式保存文件。

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+'/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