web-dev-qa-db-fra.com

Comment télécharger un fichier avec React Native?

Je construis une application avec React Native, pour Android et iOS. J'essaie de laisser l'utilisateur télécharger un PDF = fichier en cliquant sur un bouton.

  • react-native-file-download ne supporte pas Android
  • react-native-fs ne fait rien quand je déclenche downloadFile (rien ne s'affiche dans la barre de notification), et je ne peux pas trouver le fichier par la suite. J'ai ajouté Android.permission.WRITE_EXTERNAL_STORAGE au fichier Android. J'ai vérifié de nouveau que le fichier que je tente de télécharger existe (dans le cas contraire, la bibliothèque génère une erreur)

Je ne trouve pas d'autres solutions à ce problème. J'ai trouvé des bibliothèques pour visualiser un fichier PDF, mais je voudrais laisser l'utilisateur télécharger le fichier PDF. Pourrais-tu m'aider s'il te plait?

react-nativereact-native-fs
20
Arnaud

Vient de mettre en œuvre la fonctionnalité de téléchargement il y a une heure: p

Suivez ces étapes:

a) npm install rn-fetch-blob

b) suivez les instructions d'installation.

b2) si vous voulez installer manuellement le paquet sans utiliser rnpm, allez à leur wiki .

c) Enfin, voici comment j'ai rendu possible le téléchargement de fichiers dans mon application:

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
})
27
Ray

Si vous utilisez Expo, react-native-fetch-blob ne fonctionnera pas. Utilisez FileSystem.

Voici un exemple de travail:

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

Vous avez maintenant localUri avec le chemin du fichier téléchargé. N'hésitez pas à définir votre propre nom de fichier au lieu de name.ext.

10
Fancy John