React Native aplikacije prikazuju slike (lokalne i udaljene) i pakiraju resurse (fontove, itd.). Razumijevanje kako učinkovito učitati slike, rukovati različitim rezolucijama i optimizirati performanse slika je važno za dobar UX i performanse.
{ } ;
Lokalne slike koriste require (pakirane); udaljene slike koriste uri. Slike trebaju eksplicitne dimenzije (width/height) — za razliku od weba, one se ne auto-skaliraju iz datoteke.
→ RESOLUTION: provide @2x and @3x variants (logo.png, [email protected], [email protected]) → RN
picks the right one per device density (crisp on all screens)
→ resizeMode: cover / contain / stretch / center → how the image fits its box
✓ Use APPROPRIATELY-SIZED images (don't load huge images into small views — wastes
memory/bandwidth)
✓ FastImage (react-native-fast-image) → better remote image performance + CACHING
(caches images so they don't re-download; smoother than the default Image for lists)
✓ Use the right FORMAT (WebP for smaller sizes); lazy-load; placeholders while loading
✓ Images are a common source of memory issues / jank in lists → optimize them
Razumijevanje kako upravljati slikama i resursima je vrijednost jer većina aplikacija prikazuje slike, a učinkovito činjenje toga utječe na UX i performanse, pa je to korisno praktično znanje.
Razumijevanje učitavanja slika — lokalnih slika preko require (pakirane tijekom izgradnje), udaljenih slika preko uri, i važne točke da slike trebaju eksplicitne dimenzije u React Nativeu (za razliku od weba, one se ne auto-skaliraju) — je neophodno za prikaz bilo koje slike.
Razumijevanje rukovanja rezolucijom (pružanje @2x/@3x varijanti tako da React Native odabere pravu po gustoći uređaja za oštre slike na svim zaslonima) i resizeMode (kako se slike prilagođavaju svojoj kutiji) je važno za slike koje dobro izgledaju na raznolikim gustoćama zaslona androida i iosa-a.
Najvažnije, razumijevanje optimizacije performansi slika je vrijednost jer su slike česta izvor problema s memorijom i jank-a (posebno u listama): korištenje odgovarajuće veličine slika (ne učitavanje ogromnih slika u male prikaze, što baca memoriju i propusnost), korištenje FastImage za bolje performanse udaljenih slika i cachiranje (tako da se slike ne učitavaju ponovno i liste glatko se mogu scrollati — značajno poboljšanje preko standarda Image za liste bogate slikama), korištenje učinkovitih formata (WebP), i lazy-učitavanje s placeholder-ima.
Ove optimizacije su važne jer aplikacije bogate slikama (česta — feedovi, galerije, profili) mogu doživjeti stvarne probleme s performansama ako slike nisu dobro obrađene.
Pošto većina aplikacija prikazuje slike i rukovanje njima dobro (ispravno učitavanje i dimenzije, varijante rezolucije, i posebno optimizacija performansi s cachiranjem i odgovarajućom veličinom) utječe na UX (oštre, brzo učitavajuće slike) i performanse (izbjegavanje problema s memorijom i jank-a), razumijevanje slika i resursa u React Nativeu je vrijedna, praktično relevantna znanja — važna za česti trebam prikaza slika, gdje je razumijevanje učitavanja, rezolucije, i posebno optimizacije performansi (cachiranje, veličina) ključno za gradnju glatkih, poliranih aplikacija bogatih slikama.