React Native-apps viser billeder (lokale og eksterne) og bundler assets (skrifttyper osv.). Det er vigtigt at forstå, hvordan man indlæser billeder effektivt, håndterer forskellige opløsninger og optimerer billedydeelsen for at sikre god UX og præstation.
{ } ;
Lokale billeder bruger require (bundlet); eksterne billeder bruger en uri. Billeder kræver eksplicitte dimensioner (bredde/højde) — i modsætning til web skaleres de ikke automatisk baseret på filen.
→ 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
At forstå, hvordan man håndterer billeder og assets, er værdifuldt, fordi de fleste apps viser billeder, og effektiv håndtering påvirker både UX og præstation, så det er praktisk nyttig viden.
At forstå indlæsning af billeder — lokale billeder via require (bundlet ved build-tid), eksterne billeder via en uri, og det vigtige punkt, at billeder kræver eksplicitte dimensioner i React Native (i modsætning til web, skaleres de ikke automatisk) — er nødvendigt for at vise et hvilket som helst billede.
At forstå opløsningshåndtering (at stille @2x/@3x-varianter til rådighed, så React Native vælger den rigtige baseret på enhedens pixeltæthed for skarpe billeder på tværs af skærme) og resizeMode (hvordan billeder passer i deres boks) er vigtigt for billeder, der ser godt ud på Androids og iOSs mangfoldige skærmtætheder.
Vigtigst er det at forstå optimering af billedydeelsen, fordi billeder er en almindelig kilde til hukommelsesproblemer og jank (især i lister): brug af korrekt dimensionerede billeder (ikke indlæsning af enorme billeder i små visninger, hvilket spildt hukommelse og båndbredde), brug af FastImage for bedre ydeelse for eksterne billeder og caching (så billeder ikke gendownloades og lister scrolles glat — en betydelig forbedring i forhold til standard Image for billedtunge lister), brug af effektive formater (WebP) og lazy-loading med pladsholdere.
Disse optimeringer betyder noget, fordi billedtunge apps (almindelige — feeds, gallerier, profiler) kan lide virkelige ydelsesproblemer, hvis billeder ikke håndteres godt.
Da de fleste apps viser billeder, og håndtering af dem godt (korrekt indlæsning og dimensioner, opløsningsvarianter og især ydelseoptimering med caching og passende dimensionering) påvirker både UX (skarpe, glat-indlæsede billeder) og præstation (undgåelse af hukommelsesproblemer og jank), er forståelse af billeder og assets i React Native værdifuld, praktisk relevant viden — vigtig for det almindelige behov for at vise billeder, hvor forståelse af indlæsning, opløsning og især ydelseoptimering (caching, dimensionering) er nøglen til at bygge glatte, polerede billedrige apps.