React Native-apper viser bilder (lokale og fjernbilder) og pakker ressurser (fonter osv.). Det er viktig å forstå hvordan du laster inn bilder effektivt, håndterer ulike oppløsninger, og optimaliserer bildeyteelsen for god brukeropplevelse og ytelse.
{ } ;
Lokale bilder bruker require (pakket); fjernbilder bruker en uri. Bilder trenger eksplisitte dimensjoner (width/height) — ulikt på web, der de ikke automatisk endrer størrelse basert 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
Å forstå hvordan du håndterer bilder og ressurser er verdifullt fordi de fleste apper viser bilder, og det å gjøre det effektivt påvirker både brukeropplevelse og ytelse, så det er nyttig praktisk kunnskap.
Å forstå lasting av bilder — lokale bilder via require (pakket ved byggetid), fjernbilder via en uri, og det viktige punktet at bilder trenger eksplisitte dimensjoner i React Native (ulikt på web, der de ikke automatisk endrer størrelse) — er nødvendig for å vise et hvilket som helst bilde.
Å forstå oppløsningshåndtering (å tilby @2x/@3x-varianter slik at React Native velger riktig basert på enhetens pikseltettheter for skarpe bilder på tvers av skjermstørrelser) og resizeMode (hvordan bilder passer inn i boksen) er viktig for bilder som ser bra ut på Androids og iOSs mangfoldige skjermtettheter.
Kanskje viktigst, å forstå optimalisering av bildeyteelse er verdifullt fordi bilder er en vanlig kilde til minneproblemer og hakking (spesielt i lister): å bruke passende størrelse på bilder (ikke laste enorme bilder inn i små visninger, som sløser minne og båndbredde), å bruke FastImage for bedre ytelse for fjernbilder og caching (slik at bilder ikke lastes ned på nytt og lister ruller jevnt — en betydelig forbedring sammenlignet med standard Image for bildekrevende lister), å bruke effektive formater (WebP), og lat lasting med plassholdere.
Disse optimaliseringene er viktige fordi bildekrevende apper (vanlig — feeds, gallerier, profiler) kan lide av reelle ytelsesproblemer hvis bilder ikke håndteres godt.
Ettersom de fleste apper viser bilder og det å håndtere dem godt (riktig lasting og dimensjoner, oppløsningsvarianter, og spesielt ytelseoptimalisering med caching og passende størrelse) påvirker både brukeropplevelse (skarpe, raskt lastende bilder) og ytelse (unngå minneproblemer og hakking), er forståelse av bilder og ressurser i React Native verdifull, praktisk relevant kunnskap — viktig for det vanlige behovet for å vise bilder, hvor forståelse av lasting, oppløsning, og spesielt ytelseoptimalisering (caching, størrelse) er nøkkelen til å bygge glatte, polerte bildekrevende apper.