Diciamo che vogliamo usare un'immagine dal web
e per questo, puoi semplicemente sceglierne una qui, lo farò con la ricerca di immagini di Google, diciamo questa
e vogliamo usare quell'immagine sul nostro gioco sullo schermo.
Ora prima, usiamo questo richiede la sintassi per caricare un'immagine locale, ora
questa sintassi non sarà più quella giusta.
Quindi duplicherò questa riga e la commenterò, per
un'immagine web, invece passi un oggetto al sorgente e su quell'oggetto, passi un puntello URI e quel puntello URI contiene una
stringa che è il tuo link all'immagine.
Quindi il tuo collegamento all'immagine viene passato all'elica URI in questo oggetto che hai passato alla fonte.
Ora, se lo fai, questo carica l'immagine dal web ma c'è una cosa importante che devi sapere.
Per l'immagine che
è stata caricata localmente, ho
detto che React Native è in grado di determinarne la larghezza e l'altezza e lo utilizza come predefinito.
Pertanto, per un'immagine caricata localmente, non è necessario impostare una larghezza e un'altezza sull'immagine, lo stiamo facendo qui perché vogliamo
sovrascrivere la larghezza e l'altezza predefinite, ma se avessi un'immagine che è già
perfettamente dimensionata, non dovresti impostare larghezza e altezza. Per le immagini dal web, React Native non è
in grado di determinare
la larghezza e l'altezza dell'immagine prima che venga caricata perché non fa parte dell'app, proviene da un web, React
Native la scarica e rappresenta una sorpresa
per quanto riguarda ciò che la larghezza e l'altezza è. Pertanto, per le immagini di rete,
quindi per le immagini
che stai recuperando con un link, devi sempre impostare una larghezza e un'altezza sull'oggetto
immagine, sul componente immagine qui. Per le immagini locali aggiunte con
il requisito, puoi farlo mentre lo facciamo per sovrascriverlo ma non
è necessario, questa è una differenziazione importante.
Ora potresti anche aver visto che per le immagini web, l'immagine caricata si è effettivamente sbiadita quando è stata caricata per la prima volta e
questo è un bell'effetto di fabbrica che React Native aggiunge automaticamente per le immagini di rete.
Scarica quell'immagine e mentre stai aspettando il completamento del download, praticamente non mostra nulla, non può
ancora mostrare l'immagine ma quando l'immagine viene caricata, non solo la inserisce lì ma invece,
lentamente la dissolve in una transizione migliore per quell'immagine caricata.
Questo è un buon effetto e puoi anche controllarlo con la durata della dissolvenza, puoi impostarlo
su un numero e il valore predefinito è
300, che sarebbe 300 ms ma puoi impostarlo su un valore di millisecondi diverso, come 1000 ms che
sarebbe un secondo per l'immagine da sbiadire e così via. Dopo il primo caricamento, l'immagine viene memorizzata nella
cache e quindi gli utilizzi successivi della stessa immagine sono avvenuti praticamente all'istante perché erano
già stati scaricati.
Ecco come utilizzare le immagini di rete e cosa essere consapevoli di queste.