Imaginile sunt ușor de adăugat în aplicația dvs. React Native. Obțineți toate dezavantajele componentei încorporate Imagine.

Imaginile oferă o mulțime de valoare aplicațiilor mobile. Acestea pot ajuta la ilustrarea conceptelor, la transmiterea de informații, la crearea interesului vizual și la furnizarea contextului pentru un anumit conținut pe care nu doriți să-l rateze utilizatorii aplicației.

Componenta React Native Image

Componenta de imagine React Native este componenta implicită furnizată de biblioteca React Native pentru a reda imagini în aplicațiile dvs. mobile. Componenta poate încărca imagini atât din surse locale, cât și de la distanță. Oferă mai multe elemente de recuzită pentru personalizarea și stilizarea imaginilor redate.

Pentru a utiliza componenta imagine în aplicația dvs., importați Imagine de la react-nativ bibliotecă:

import Reacţiona din'reacţiona';
import { Style Sheet, Image, View } din„reacționează-nativ”;
const Aplicație = () => {
întoarcere (

 style={styles.image}
 sursa={cere(„./assets/my-image.jpg”)}
 />
 </View>
 );
};





instagram viewer

const stiluri = StyleSheet.create({
 container: {
 contracta: 1,
 alignItems: 'centru',
 justifyContent: 'centru',
 },
 imagine: {
 lăţime: 200,
 înălţime: 200,
 borderRadius: 100,
 },
});

Mai sus este un simplu App componentă cu o imagine. The Imagine componenta ia a stil prop care stabilește lăţime, înălţime, și borderRadius a imaginii. Este nevoie și de o sursă prop care încarcă imaginea dintr-un fișier local situat în folderul „assets” din directorul aplicației. The sursă prop definește calea imaginii de inclus și poate accepta atât surse de imagine locale, cât și de rețea/la distanță.

Imaginile locale sunt disponibile pe dispozitivul utilizatorului și le puteți stoca fie temporar, fie permanent. Puteți stoca imagini locale în directorul de proiect al aplicației, cum ar fi un active pliant. De asemenea, puteți găsi imagini în afara directorului aplicației, cum ar fi în ruloul aparatului foto sau în biblioteca de fotografii a dispozitivului. Iată un exemplu de cale sursă către o imagine locală:

uri: „file:///path/to/my-image.jpg” }} />

Imaginile de rețea sunt livrate prin web. Acestea ar putea include URL-uri HTTP/HTTPS sau URI-uri de date codificate în base64, care încorporează datele direct în adresa URL folosind schema de codare Base64.

Recuzită pentru a personaliza componenta imagine

Există mai multe elemente de recuzită pe care le puteți folosi pentru a stila și personaliza componenta React Native Image.

resizeMode

The resizeMode prop determină modul în care React ar trebui să redimensioneze și să poziționeze o imagine în containerul său. Există mai multe valori disponibile pentru resizeMode, fiecare dintre acestea va afecta diferit imaginea.

  • acoperi: Această valoare va scala imaginea uniform, astfel încât ambele dimensiuni să fie egale sau mai mari decât elementul care o conține. Imaginea este apoi centrată în container. Utilizarea acestei valori poate duce la decuparea imaginii pentru a menține raportul de aspect.
  • conține: Aceasta va încerca să se potrivească și să centreze perfect imaginea în dimensiunile containerului. Cu toate acestea, acest lucru poate duce la un spațiu gol în jurul marginilor imaginii.
  • întinde: The întinde value întinde imaginea pentru a umple întregul container, indiferent de raportul de aspect. Uneori provocând distorsionarea imaginii.
  • repeta: Această valoare repetă imaginea atât pe orizontală, cât și pe verticală pentru a umple întregul recipient.
  • centru: Aceasta va centra imaginea în elementul container fără a o scala.

onLoad

Acesta este un funcția de apel invers care rulează când imaginea se termină de încărcat. Îl puteți folosi pentru a efectua acțiuni după încărcarea imaginii, cum ar fi actualizarea stării componentei sau afișarea unui mesaj către utilizator.

onError

The onError prop va rula dacă sau când imaginea nu se încarcă. Oferă o modalitate de a efectua acțiunile necesare dacă există o eroare în timpul încercării de a încărca imaginea. Puteți afișa un mesaj de eroare utilizatorului sau puteți încerca din nou să încărcați imaginea.

defaultSource

Această reclamă specifică o imagine alternativă de afișat dacă imaginea principală nu se încarcă. Îl puteți folosi pentru a furniza o imagine implicită sau o imagine substituent în timp ce imaginea principală se încarcă.

Gestionarea imaginilor de la distanță dintr-un API

Poate fi necesar să obțineți imaginea aplicației dvs. de la un API sau un server la distanță și să o afișați în aplicația dvs. Puteți utiliza React încorporat aduce funcţie sau o API solicită bibliotecă precum Axios în acest scop.

Iată un exemplu despre cum să preluați și să afișați o imagine dintr-un API la distanță folosind aduce funcţie:

const [imageUri, setImageUri] = useState(nul);
useEffect(() => {
 aduce(' https://example.com/api/images/1')
 .apoi(raspuns => response.json())
 .apoi(date => setImageUri (data.url))
 .captură(eroare =>consolă.eroare (eroare));
}, []);
întoarcere (

 {imageUri? (
uri: imageUri }} />
 ): (
Se încarcă...</Text>
 )}
 </View>
);

Rularea acestui cod în aplicația dvs. va prelua o imagine de la linkul API la distanță setat. Exemplul creează mai întâi o variabilă de stare pentru imagineUri. Intr-un useEffect cârlig, cel aduce funcția recuperează imageUri și îl stochează în variabila de stare folosind setImageUri().

În cele din urmă, redă Imagine componentă cu sursă prop setată la URI-ul imaginii în timp ce se afișează un indicator de încărcare, așteptând afișarea imaginii.

Utilizarea Propul politicii cache pentru a controla comportamentul în cache

Browserul dvs. poate stoca în cache imaginile pe care le încarcă de la adrese URL de la distanță, astfel încât să le poată încărca din nou rapid în viitor. Puteți personaliza comportamentul imaginii stocate în cache folosind cache recuzită. Acest suport poate specifica modul în care un browser ar trebui să memoreze imaginea și cum ar trebui să invalideze acel cache.

Propul cache-ului poate lua valori precum implicit, reîncărcare, forțare cache, și doar dacă este stocat în cache.

Iată un exemplu despre cum să utilizați cache prop pentru a controla comportamentul în cache al unei imagini:

 sursa={{
 uri: ' https://example.com/images/my-image.png',
 cache: „force-cache”,
 cacheKey: „imaginea mea”,
 imuabil: Adevărat
 }}
/>

The cache proprietatea este setată la „force-cache”, ceea ce indică faptul că browserul ar trebui să încarce imaginea din cache dacă este disponibilă, chiar dacă acea versiune cache este veche.

O recuzită nouă cacheKey este, de asemenea, în joc aici. Este setat la „imaginea mea”, care va servi ca o cheie cache personalizată pe care o puteți folosi pentru a face referire la imaginea stocată în cache mai târziu.

De asemenea imuabil proprietatea este setată la Adevărat, care îi spune browserului să trateze această intrare din cache ca imuabilă și să nu o invalideze niciodată.

Totul Este Despre Imagini

Componenta React Native Image oferă un mijloc puternic și flexibil pentru afișarea imaginilor, inclusiv stilul, gestionarea imaginilor de la distanță și controlul comportamentului cache-ului.

Pentru imaginile de la distanță, puteți utiliza întotdeauna un substituent pentru a afișa o imagine sau un text temporar în timp ce imaginea de la distanță se încarcă. Acest lucru va crea o experiență mai bună pentru utilizator, oferind feedback vizual imediat și împiedicând aplicația să nu răspundă.