Affichage et stockage d'image - [react native]

trunks93
Javascript

Bonjour,
Je suis en train de développer une application mobile en react native me permettant de lire en offline les articles(pdf) acheter en ligne depuis un site que j'ai conçu. Après plusieurs recherche j'ai conçu mon API qui me renvoie en JSON toutes les infos dont j'ai besoin.
Pour l'application mobile je rencontre quelques soucis majeurs :
1- Comment afficher dynamiquement les images (les Unes des articles), vue que d'avance je ne les connais pas pour que je les affiche de manière statique comme le préconise le composant Image.
2- Comment télécharger dans mon application (si c'est possible en tout cas) tous les fichiers et autres données pour que cela fonctionne en offline.

Si quelqu'un a une idée pour l'un de ces 2 points je suis preneur.

Je vous remercie d'avance.

1 réponse

Alban Lautie

Bonjour trunks93,

Déjà pour les images en react native c'est un peu subtile. Tu dois avoir un require dynamique si tu souhaite avoir des images dynamiques.

// Exemples
let image = require('monimage1.jpg') // OK
image = require('monimage2.jpg') // OK

image = require(`monimage${index}.jpg`) // KO (le lien du require n'est pas statique)

Le chemin contenu dans le require doit être obligatoirement statique mais le require en lui même peut être dynamique. Donc tu dois créer les require de toute les images que tu souhaite avoir puis l'injecter dans une variable. Si ce sont des images externe tu peux utilisé l'uri.

En suite, le second soucis, il te faudra créer un système de cache comme ça tu stocke tes datas quand tu as du réseau avec le AsyncStorage. Parfait pour les réponses JSON.