in React-Native

Caricare immagini da file system in React-Native

Immaginate di avere accesso ad un set di informazioni, tra le quali, figura il percorso fisico di un’immagine, presente sul dispositivo Smartphone, che dovete caricare all’interno della vostra applicazione. Normalmente siamo abituati ad utilizzare l’oggetto Image di React-Native con immagini locali, cioè presenti all’interno del nostro progetto, oppure con URI che puntano a file remoti (probabilmente sul web), come in questi esempi:

// Local project image:
<Image source={require('../assets/images/close.png') />

// Remote image: 
<Image source={{ uri: 'http://robertoconterosito.com/close.png' }} />

Cosa fare invece se l’immagine è proprio sul nostro dispositivo?
Se per esempio, abbiamo la necessità di mostrare la seguente immagine:

var localFile = '/data/user/temp/close.png'

E’ davvero questione di dettagli ma, come sempre, è fondamentale saperlo, in caso contrario la situazione è comunque complicata!
In questo caso, se utilizzassimo require non riusciremmo ad ottenere nulla, l’accorgimento da adottare invece è davvero semplice:

<Image source={{ uri: "file://" + localFile }} />

Aggiungendo come prefisso file:// costringiamo React ad attivarsi perché carichi l’immagine dallo storage locale e non più da un percorso remoto o relativo (interno alla nostra app).

Scrivi un commento

Commento