React Native aplikace zobrazují obrázky (lokální i vzdálené) a balí assety (fonty apod.). Pochopení toho, jak efektivně načítat obrázky, zvládat různá rozlišení a optimalizovat výkon obrázků, je důležité pro dobrou UX a výkon.
{ } ;
Lokální obrázky používají require (balené); vzdálené obrázky používají uri. Obrázky vyžadují explicitní rozměry (width/height) — na rozdíl od webu se automaticky nezmění na základě souboru.
→ 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
Pochopení toho, jak manipulovat obrázky a assety, je cenné, protože většina aplikací zobrazuje obrázky, a jejich efektivní zobrazení ovlivňuje jak UX tak výkon, takže je to užitečné praktické znalosti.
Pochopení načítání obrázků — lokální obrázky přes require (balené při buildu), vzdálené obrázky přes uri, a důležitou skutečnost, že obrázky v React Native vyžadují explicitní rozměry (na rozdíl od webu, kde se nezmění automaticky) — je nezbytné pro zobrazení jakéhokoliv obrázku.
Pochopení zpracování rozlišení (poskytování variant @2x/@3x, aby React Native pro každou hustotu pixelů zařízení vybral správnou variantu pro jasné obrázky across všemi obrazovkami) a resizeMode (jak se obrázky vejdou do své schránky) je důležité pro obrázky, které vypadají dobře na Android i iOS zařízeních s různými hustotami pixelů.
Nejdůležitější je pochopení optimalizace výkonu obrázků, které je cenné, protože obrázky jsou běžným zdrojem problémů s pamětí a jank (zejména v seznamech): použití odpovídajících velikostí obrázků (nenačítání obřích obrázků do malých zobrazení, které plýtvá pamětí a šířkou pásma), použití FastImage pro lepší výkon vzdálených obrázků a cachování (aby se obrázky znovu nestahoval a seznamy se plynule posunuly — významné zlepšení oproti výchozímu Image pro seznamy bohaté na obrázky), použití efektivních formátů (WebP) a lazy-loading s placeholdery.
Tyto optimalizace jsou důležité, protože aplikace bohaté na obrázky (běžné — kanály, galerie, profily) mohou trpět skutečnými problémy s výkonem, pokud obrázky nejsou zpracovány dobře.
Požaduje se pochopení, že aplikace zobrazují obrázky a jejich správné zpracování (správné načítání a rozměry, varianty rozlišení a zejména optimalizace výkonu s cachováním a příslušnou velikostí) ovlivňuje jak UX (jasné, hladce se načítající obrázky), tak výkon (vyvarování se problémům s pamětí a jank), takže pochopení obrázků a assetů v React Native je cenné, prakticky relevantní znalosti — důležité pro běžnou potřebu zobrazovat obrázky, kde je pochopení načítání, rozlišení a zejména optimalizace výkonu (cachování, dimenzování) klíčem k vytváření hladkých, leštěných aplikací bohatých na obrázky.