Hoe ga je om met afbeeldingen en assets in React Native?

Question

Accepted Answer

React Native-apps geven **afbeeldingen** weer (lokaal en remote) en bundelen **assets** (fonts, enz.). Begrijpen hoe je afbeeldingen efficiënt laadt, verschillende resoluties afhandelt en afbeeldingsprestaties optimaliseert, is belangrijk voor goede UX en prestaties. ## Afbeeldingen laden ```jsx import { Image } from 'react-native'; // LOCAL image (bundled with the app) — required at build time // REMOTE image (from a URL) — needs explicit dimensions ``` Lokale afbeeldingen gebruiken `require` (gebundeld); remote afbeeldingen gebruiken een `uri`. **Afbeeldingen hebben expliciete dimensies nodig** (breedte/hoogte) — anders dan op het web, ze hebben niet automatisch grootte van het bestand. ## Resolutie en resizeMode ```text → RESOLUTION: provide @2x and @3x variants (logo.png, logo@2x.png, logo@3x.png) → RN picks the right one per device density (crisp on all screens) → resizeMode: cover / contain / stretch / center → how the image fits its box ``` ## Prestaties: optimaliseer afbeeldingen ```text ✓ 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 ``` ## Waarom het belangrijk is Begrijpen hoe je afbeeldingen en assets afhandelt, is waardevol omdat **de meeste apps afbeeldingen weergeven**, en dit efficiënt doen beïnvloedt zowel UX als prestaties, dus het is nuttige praktische kennis. Begrijpen **afbeeldingen laden** — lokale afbeeldingen via `require` (op buildtijd gebundeld), remote afbeeldingen via een `uri`, en het belangrijk punt dat **afbeeldingen expliciete dimensies nodig hebben** in React Native (anders dan op het web, ze hebben niet automatisch grootte) — is noodzakelijk voor het weergeven van enige afbeelding. Begrijpen **resolutieafhandeling** (het bieden van @2x/@3x-varianten zodat React Native per apparaatdichtheid de juiste kiest voor scherpe afbeeldingen op verschillende schermen) en **resizeMode** (hoe afbeeldingen in hun vak passen) is belangrijk voor afbeeldingen die er goed uitzien op de diverse schermdikte van Android en iOS. Het belangrijkste is begrijpen **optimalisatie van afbeeldingsprestaties** waardevol omdat **afbeeldingen een veelvoorkomende bron van geheugenissues en jank zijn** (vooral in lijsten): gebruik van passend grote afbeeldingen (geen enorme afbeeldingen in kleine weergaven laden, wat geheugen en bandbreedte verspilt), gebruik van **FastImage** voor betere remote-afbeeldingsprestaties en **caching** (zodat afbeeldingen niet opnieuw worden gedownload en lijsten soepel scrollen — een aanzienlijke verbetering ten opzichte van de standaard Image voor afbeeldingsrijke lijsten), gebruik van efficiënte indelingen (WebP), en lazy-loading met placeholders. Deze optimalisaties zijn belangrijk omdat afbeeldingsrijke apps (veelvoorkomend — feeds, galerijen, profielen) echte prestatieproblemen kunnen hebben als afbeeldingen niet goed worden afgehandeld. Omdat de meeste apps afbeeldingen weergeven en deze goed afhandelen (correct laden en dimensies, resolutievarianten, en vooral optimalisatie van prestaties met caching en passende grootte) zowel UX (scherpe, soepel geladen afbeeldingen) als prestaties (vermijding van geheugenissues en jank) beïnvloedt, is het begrijpen van afbeeldingen en assets in React Native waardevol, praktisch relevant kennis — belangrijk voor de veelvoorkomende noodzaak van het weergeven van afbeeldingen, waarbij het begrijpen van laden, resolutie, en vooral optimalisatie van prestaties (caching, grootte) essentieel is voor het bouwen van soepel werkende, gepolijste afbeeldingsrijke apps.