如何使用React Native下载文件？

Question

我正在使用React Native为Android和iOS构建应用程序.我试图让用户在单击按钮时下载PDF文件.

• react-native-file-download不支持Android
• 当我触发downloadFile时,react-native-fs什么都不做(通知栏上没有显示任何内容),之后我无法找到该文件.我添加android.permission.WRITE_EXTERNAL_STORAGE到Android Manifest文件中.我仔细检查了我试图下载的文件是否存在(当它没有时,库会抛出错误)

我没有找到解决此问题的其他解决方案.我找到了用于查看PDF的库,但我想让用户下载PDF.请问你能帮帮我吗？

Answer 1

刚刚在一小时前实现了下载功能:p

跟着这些步骤:

a)npm install rn-fetch-blob

b)按照安装说明进行操作.

b2)如果你想在不使用rnpm的情况下手动安装软件包,请访问他们的wiki.

c)最后,这就是我如何在我的应用程序中下载文件:

const { config, fs } = RNFetchBlob
let PictureDir = fs.dirs.PictureDir // this is the pictures directory. You can check the available directories in the wiki.
let options = {
  fileCache: true,
  addAndroidDownloads : {
    useDownloadManager : true, // setting it to true will use the device's native download manager and will be shown in the notification bar.
    notification : false,
    path:  PictureDir + "/me_"+Math.floor(date.getTime() + date.getSeconds() / 2), // this is the path where your downloaded file will live in
    description : 'Downloading image.'
  }
}
config(options).fetch('GET', "http://www.example.com/example.pdf").then((res) => {
  // do some magic here
})

Answer 2

如果您使用的是Expo，react-native-fetch-blob将无法使用。使用FileSystem。

这是一个工作示例：

const { uri: localUri } = await FileSystem.downloadAsync(remoteUri, FileSystem.documentDirectory + 'name.ext');

现在，您具有localUri下载文件的路径。随意设置您自己的文件名而不是name.ext。

Answer 3

我遵循了这篇文章上面 Jonathan Simonney 的解决方案。但我不得不稍微改变一下：

const { config, fs } = RNFetchBlob;
  const date = new Date();

  const { DownloadDir } = fs.dirs; // You can check the available directories in the wiki.
  const options = {
    fileCache: true,
    addAndroidDownloads: {
      useDownloadManager: true, // true will use native manager and be shown on notification bar.
      notification: true,
      path: `${DownloadDir}/me_${Math.floor(date.getTime() + date.getSeconds() / 2)}.pdf`,
      description: 'Downloading.',
    },
  };

  config(options).fetch('GET', 'http://www.africau.edu/images/default/sample.pdf').then((res) => {
    console.log('do some magic in here');
  });