Slike je jednostavno dodati u vašu aplikaciju React Native. Iskoristite sve prednosti ugrađene komponente slike.

Slike pružaju veliku vrijednost mobilnim aplikacijama. Oni mogu pomoći u ilustriranju koncepata, prenošenju informacija, stvaranju vizualnog interesa i pružanju konteksta za određeni sadržaj koji možda ne želite da korisnici vaše aplikacije propuste.

React izvorna komponenta slike

Komponenta slike React Native zadana je komponenta koju React Native biblioteka pruža za prikaz slika u vašim mobilnim aplikacijama. Komponenta može učitati slike iz lokalnih i udaljenih izvora. Omogućuje nekoliko rekvizita za prilagodbu i stiliziranje prikazanih slika.

Da biste koristili komponentu slike u svojoj aplikaciji, uvezite Slika od reagirati-domaći knjižnica:

uvoz Reagirati iz'reagirati';
uvoz {Stilski list, slika, prikaz} iz'react-native';
konst Aplikacija = () => {
povratak (

 stil={styles.image}
 izvor={zahtijevati('./assets/my-image.jpg')}
 />
 </View>
 );
};
konst stilovi = StyleSheet.create({
 spremnik: {





instagram viewer



 savijati: 1,
 poravnati stavke: 'centar',
 justifyContent: 'centar',
 },
 slika: {
 širina: 200,
 visina: 200,
 radijus granice: 100,
 },
});

Gore je jednostavno aplikacija komponenta sa slikom. The Slika komponenta uzima a stil oslonac koji postavlja širina, visina, i radijus granice slike. Također je potrebno a izvor prop koji učitava sliku iz lokalne datoteke koja se nalazi u mapi "assets" unutar direktorija aplikacije. The izvor prop definira putanju slike koju treba uključiti i može prihvatiti lokalne i mrežne/udaljene izvore slike.

Lokalne slike dostupne su na uređaju korisnika i možete ih pohraniti privremeno ili trajno. Možete pohraniti lokalne slike unutar direktorija projekta aplikacije, kao što je imovina mapa. Također možete locirati slike izvan direktorija aplikacije, primjerice u snimljenoj fotografiji uređaja ili u biblioteci fotografija. Evo primjera izvornog puta do lokalne slike:

uri: 'datoteka:///put/do/moje-slike.jpg' }} />

Mrežne slike isporučuju se putem weba. Mogu uključivati ​​HTTP/HTTPS URL-ove ili URI-je podataka kodiranih base64, koji ugrađuju podatke izravno u URL koristeći shemu kodiranja Base64.

Rekviziti za prilagodbu komponente slike

Postoji nekoliko rekvizita koje možete koristiti za stiliziranje i prilagodbu React Native Image komponente.

resizeMode

The resizeMode prop određuje kako React treba promijeniti veličinu i položaj slike unutar svog spremnika. Postoji nekoliko dostupnih vrijednosti za resizeMode, od kojih će svaki drugačije utjecati na sliku.

  • pokriti: Ova će vrijednost ravnomjerno skalirati sliku tako da obje dimenzije budu jednake ili veće od elementa koji sadrži. Slika se zatim centrira unutar spremnika. Korištenje ove vrijednosti može dovesti do izrezivanja slike kako bi se zadržao omjer slike.
  • sadržavati: Ovo će pokušati savršeno uklopiti i centrirati sliku unutar dimenzija spremnika. Međutim, to može rezultirati praznim prostorom oko rubova slike.
  • protežu se: The protežu se vrijednost rasteže sliku da ispuni cijeli spremnik, bez obzira na omjer širine i visine slike. Ponekad uzrokuje iskrivljenje slike.
  • ponoviti: Ova vrijednost ponavlja sliku vodoravno i okomito kako bi ispunila cijeli spremnik.
  • centar: Ovo će centrirati sliku unutar elementa spremnika bez njezinog skaliranja.

onLoad

Ovo je funkcija povratnog poziva koji se pokreće kada se slika završi s učitavanjem. Možete ga koristiti za izvođenje radnji nakon učitavanja slike, kao što je ažuriranje stanja komponente ili prikazivanje poruke korisniku.

onError

The onError prop će se pokrenuti ako ili kada se slika ne uspije učitati. Omogućuje izvođenje potrebnih radnji ako dođe do pogreške prilikom pokušaja učitavanja slike. Možete prikazati poruku o pogrešci korisniku ili ponovno pokušati učitati sliku.

defaultSource

Ova postavka navodi zamjensku sliku za prikaz ako se glavna slika ne uspije učitati. Možete ga koristiti za pružanje zadane slike ili slike rezerviranog mjesta dok se glavna slika učitava.

Rukovanje udaljenim slikama iz API-ja

Možda ćete morati dobiti sliku za svoju aplikaciju s API-ja ili udaljenog poslužitelja i prikazati je unutar svoje aplikacije. Možete koristiti ugrađeni React dohvatiti funkcija ili an Biblioteka API zahtjeva kao što je Axios za ovu svrhu.

Evo primjera kako dohvatiti i prikazati sliku s udaljenog API-ja pomoću dohvatiti funkcija:

konst [imageUri, setImageUri] = useState(ništavan);
useEffect(() => {
 dohvati (' https://example.com/api/images/1')
 .zatim(odgovor => response.json())
 .zatim(podaci => setImageUri (data.url))
 .ulov(greška =>konzola.greška (greška));
}, []);
povratak (

 {imageUri? (
uri: imageUri }} />
 ): (
Učitavanje...</Text>
 )}
 </View>
);

Pokretanje ovog koda unutar vaše aplikacije će dohvatiti sliku iz postavljene veze udaljenog API-ja. Primjer prvo stvara varijablu stanja za imageUri. Unutar a useEffect udica, dohvatiti funkcija dohvaća imageUri i pohranjuje ga u varijablu stanja pomoću setImageUri().

Konačno, prikazuje Slika komponenta s izvor prop postavljen na URI slike dok se prikazuje indikator učitavanja, čekajući da se slika prikaže.

Korištenje Cache Policy Prop za kontrolu ponašanja predmemorije

Vaš preglednik može predmemorirati slike koje učitava s udaljenih URL-ova, tako da ih u budućnosti može ponovno brzo učitati. Možete prilagoditi ponašanje predmemorirane slike pomoću predmemorija oslonac Ovaj dodatak može odrediti kako bi preglednik trebao spremiti sliku u predmemoriju i kako bi trebao poništiti tu predmemoriju.

Prop predmemorije može poprimiti vrijednosti poput zadano, ponovno učitaj, prisilno keširanje, i samo ako je predmemorirano.

Evo primjera kako koristiti predmemorija prop za kontrolu ponašanja predmemorije slike:

 izvor={{
 uri: ' https://example.com/images/my-image.png',
 predmemorija: 'force-cache',
 cacheKey: 'moja-slika',
 nepromjenjivo: pravi
 }}
/>

The predmemorija svojstvo je postavljeno na 'force-cache', što znači da preglednik treba učitati sliku iz predmemorije ako je dostupna, čak i ako je ta verzija predmemorije stara.

Novi rekvizit cacheKey također je ovdje u igri. Postavljen je na 'moja-slika', koji će služiti kao prilagođeni ključ predmemorije koji kasnije možete koristiti za referencu predmemorirane slike.

Također, nepromjenjiv svojstvo je postavljeno na pravi, koji govori pregledniku da ovaj unos u predmemoriju tretira kao nepromjenjiv i da ga nikada ne poništava.

Sve što postoji o slikama

Komponenta React Native Image pruža moćna i fleksibilna sredstva za prikazivanje slika, uključujući stiliziranje, rukovanje udaljenim slikama i kontrolu ponašanja predmemorije.

Za udaljene slike uvijek možete koristiti rezervirano mjesto za prikaz privremene slike ili teksta dok se udaljena slika učitava. To će stvoriti bolje korisničko iskustvo pružanjem trenutačne vizualne povratne informacije i sprječavanjem da aplikacija ne reagira.