React Native Apps zeigen Bilder (lokal und remote) an und bündeln Assets (Schriftarten, etc.). Das Verständnis dafür, wie du Bilder effizient lädst, verschiedene Auflösungen handhabst und die Bildleistung optimierst, ist wichtig für gute UX und Leistung.
{ } ;
Lokale Bilder verwenden require (gebündelt); Remote-Bilder verwenden einen uri. Bilder benötigen explizite Dimensionen (width/height) — anders als im Web, sie werden nicht automatisch von der Dateigröße angepasst.
→ 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
Das Verständnis dafür, wie man Bilder und Assets handhabt, ist wertvoll, weil die meisten Apps Bilder anzeigen, und dies effizient zu tun, wirkt sich auf UX und Leistung aus, daher ist es praktisches Wissen.
Das Verständnis des Ladens von Bildern — lokale Bilder über require (zur Build-Zeit gebündelt), Remote-Bilder über einen uri, und der wichtige Punkt, dass Bilder explizite Dimensionen in React Native benötigen (anders als im Web, sie werden nicht automatisch angepasst) — ist notwendig, um Bilder anzuzeigen.
Das Verständnis der Auflösungsbehandlung (Bereitstellung von @2x/@3x Varianten, damit React Native die richtige pro Geräte-Dichte auswählt für scharfe Bilder auf verschiedenen Bildschirmen) und resizeMode (wie Bilder in ihre Box passen) ist wichtig für Bilder, die auf Androids und iPhones vielfältigen Bildschirmdichten gut aussehen.
Am wichtigsten ist das Verständnis der Bildleistungsoptimierung wertvoll, weil Bilder eine häufige Quelle für Speicherprobleme und Ruckeln sind (besonders in Listen): die Verwendung von angemessen großen Bildern (nicht das Laden riesiger Bilder in kleine Ansichten, was Speicher und Bandbreite verschwendet), die Verwendung von FastImage für bessere Remote-Bildleistung und Caching (damit Bilder nicht erneut heruntergeladen werden und Listen smooth scrollen — eine erhebliche Verbesserung gegenüber dem Standard Image für bildintensive Listen), die Verwendung effizienter Formate (WebP) und Lazy-Loading mit Platzhaltern.
Diese Optimierungen sind wichtig, weil bildintensive Apps (häufig — Feeds, Galerien, Profile) echte Leistungsprobleme erleiden können, wenn Bilder nicht gut gehandhabt werden.
Da die meisten Apps Bilder anzeigen und sie gut zu handhaben (korrektes Laden und Dimensionen, Auflösungsvarianten, und besonders Leistungsoptimierung mit Caching und angemessener Größe) sowohl UX (scharfe, schnell ladende Bilder) als auch Leistung (Vermeidung von Speicherproblemen und Ruckeln) beeinflusst, ist das Verständnis von Bildern und Assets in React Native wertvoll, praktisch relevantes Wissen — wichtig für die häufige Notwendigkeit, Bilder anzuzeigen, wobei das Verständnis von Laden, Auflösung und besonders Leistungsoptimierung (Caching, Größe) der Schlüssel zum Aufbau glatter, polierter bildintensiver Apps ist.