Le immagini sono facili da aggiungere alla tua app React Native. Ottieni tutti i dettagli sul componente Immagine integrato.

Le immagini forniscono molto valore alle applicazioni mobili. Possono aiutare a illustrare concetti, trasmettere informazioni, creare interesse visivo e fornire un contesto per contenuti specifici che potresti non voler perdere agli utenti della tua app.

Il componente dell'immagine nativa di React

Il componente immagine React Native è il componente predefinito fornito dalla libreria React Native per il rendering delle immagini nelle tue app mobili. Il componente può caricare immagini da fonti locali e remote. Fornisce diversi oggetti di scena per la personalizzazione e lo stile delle immagini renderizzate.

Per utilizzare il componente immagine nella tua applicazione, importa Immagine dal react-nativo biblioteca:

importare Reagire da'reagire';
importare {Foglio di stile, immagine, vista} da'nativo di reazione';
cost Applicazione = () => {
ritorno (

 stile={stili.immagine}
 fonte={richiedere('./assets/mia-immagine.jpg')}
 />
 </View>
 );
};





instagram viewer

cost styles = StyleSheet.create({
 contenitore: {
 flettere: 1,
 alignItems: 'centro',
 giustificaContenuto: 'centro',
 },
 Immagine: {
 larghezza: 200,
 altezza: 200,
 bordoRaggio: 100,
 },
});

Sopra è un semplice App componente con un'immagine. IL Immagine componente prende a stile prop che imposta il larghezza, altezza, E borderRadius dell'immagine. Ci vuole anche un fonte prop che carica l'immagine da un file locale situato nella cartella "assets" all'interno della directory dell'app. IL fonte prop definisce il percorso dell'immagine da includere e può accettare sorgenti di immagini sia locali che di rete/remote.

Le immagini locali sono disponibili sul dispositivo dell'utente ed è possibile memorizzarle temporaneamente o permanentemente. Puoi archiviare immagini locali all'interno della directory del progetto dell'app, ad esempio un file risorse cartella. Puoi anche individuare le immagini al di fuori della directory dell'app, ad esempio nel rullino fotografico del dispositivo o nella libreria di foto. Ecco un esempio di un percorso di origine a un'immagine locale:

uri: 'file:///percorso/della/mia-immagine.jpg' }} />

Le immagini di rete vengono fornite tramite il web. Potrebbero includere URL HTTP/HTTPS o URI di dati con codifica Base64, che incorporano i dati direttamente nell'URL utilizzando lo schema di codifica Base64.

Puntelli per personalizzare il componente dell'immagine

Ci sono diversi oggetti di scena che puoi usare per modellare e personalizzare il componente React Native Image.

resizeMode

IL resizeMode prop determina come React dovrebbe ridimensionare e posizionare un'immagine all'interno del suo contenitore. Ci sono diversi valori disponibili per resizeMode, ognuno dei quali influenzerà l'immagine in modo diverso.

  • copertina: Questo valore ridimensionerà l'immagine in modo uniforme in modo che entrambe le dimensioni siano uguali o maggiori dell'elemento che la contiene. L'immagine viene quindi centrata all'interno del contenitore. L'utilizzo di questo valore può comportare il ritaglio dell'immagine per mantenere le proporzioni.
  • contenere: Questo tenterà di adattare e centrare perfettamente l'immagine all'interno delle dimensioni del contenitore. Tuttavia, ciò potrebbe causare uno spazio vuoto attorno ai bordi dell'immagine.
  • stirata: IL stirata Il valore allunga l'immagine per riempire l'intero contenitore, indipendentemente dalle proporzioni. A volte provocando la distorsione dell'immagine.
  • ripetere: Questo valore ripete l'immagine sia orizzontalmente che verticalmente per riempire l'intero contenitore.
  • centro: Questo centrerà l'immagine all'interno dell'elemento contenitore senza ridimensionarlo.

onLoad

Questo è un funzione di richiamo che viene eseguito al termine del caricamento dell'immagine. Puoi usarlo per eseguire azioni dopo il caricamento dell'immagine, come l'aggiornamento dello stato del componente o la visualizzazione di un messaggio all'utente.

onError

IL onError prop verrà eseguito se o quando l'immagine non viene caricata. Fornisce un modo per eseguire le azioni necessarie se si verifica un errore durante il tentativo di caricare l'immagine. È possibile visualizzare un messaggio di errore all'utente o riprovare a caricare l'immagine.

defaultSource

Questa prop specifica un'immagine di fallback da visualizzare se l'immagine principale non viene caricata. Puoi usarlo per fornire un'immagine predefinita o un'immagine segnaposto durante il caricamento dell'immagine principale.

Gestione di immagini remote da un'API

Potrebbe essere necessario ottenere l'immagine per la tua applicazione da un'API o da un server remoto e visualizzarla all'interno della tua app. Puoi usare React integrato andare a prendere funzione o un L'API richiede una libreria come Axios per questo scopo.

Ecco un esempio di come recuperare e visualizzare un'immagine da un'API remota utilizzando il andare a prendere funzione:

cost [imageUri, setImageUri] = useState(nullo);
usaEffetto(() => {
 andare a prendere(' https://example.com/api/images/1')
 .Poi(risposta => risposta.json())
 .Poi(dati => setImageUri (data.url))
 .presa(errore =>consolare.errore (errore));
}, []);
ritorno (

 {immagineUri? (
uri: imageUri }} />
 ): (
Caricamento...</Text>
 )}
 </View>
);

L'esecuzione di questo codice all'interno della tua app recupererà un'immagine dal collegamento API remoto impostato. L'esempio crea prima una variabile di stato per il imageUri. All'interno di una useEffect gancio, il andare a prendere La funzione recupera l'imageUri e lo memorizza nella variabile di stato using setImageUri().

Infine, rende il file Immagine componente con il fonte prop impostato sull'URI dell'immagine mentre viene visualizzato un indicatore di caricamento, in attesa che venga mostrata l'immagine.

Utilizzo della proprietà della politica della cache per controllare il comportamento della cache

Il tuo browser può memorizzare nella cache le immagini che carica da URL remoti, in modo da poterle ricaricare rapidamente in futuro. È possibile personalizzare il comportamento dell'immagine memorizzata nella cache utilizzando il file cache puntello. Questa prop può specificare come un browser dovrebbe memorizzare nella cache l'immagine e come dovrebbe invalidare tale cache.

L'elica della cache può assumere valori come default, ricarica, cache forzata, E solo se memorizzato nella cache.

Ecco un esempio di come utilizzare il cache prop per controllare il comportamento della cache di un'immagine:

 fonte={{
 uri: ' https://example.com/images/my-image.png',
 cache: 'cache forzata',
 cacheKey: 'mia-immagine',
 immutabile: VERO
 }}
/>

IL cache proprietà è impostata su 'cache forzata', che indica che il browser dovrebbe caricare l'immagine dalla cache se è disponibile, anche se quella versione della cache è vecchia.

Un nuovo oggetto di scena cacheKey è in gioco anche qui. È impostato su 'mia-immagine', che fungerà da chiave di cache personalizzata che potrai utilizzare per fare riferimento all'immagine memorizzata nella cache in un secondo momento.

Anche il immutabile proprietà è impostata su VERO, che indica al browser di trattare questa voce della cache come immutabile e di non invalidarla mai.

Tutto quello che c'è sulle immagini

Il componente React Native Image fornisce un mezzo potente e flessibile per la visualizzazione delle immagini, inclusi lo stile, la gestione delle immagini remote e il controllo del comportamento della cache.

Per le immagini remote, puoi sempre utilizzare un segnaposto per visualizzare un'immagine o un testo temporaneo durante il caricamento dell'immagine remota. Ciò creerà una migliore esperienza utente fornendo un feedback visivo immediato e impedendo all'app di non rispondere.