Aplikacje React Native wyświetlają obrazy (lokalne i zdalne) i dołączają zasoby (czcionki itp.). Zrozumienie, jak ładować obrazy efektywnie, obsługiwać różne rozdzielczości i optymalizować wydajność obrazów, jest ważne dla dobrego UX i wydajności.
{ } ;
Obrazy lokalne używają require (dołączone w pakiecie); obrazy zdalne używają uri. Obrazy wymagają jawnych wymiarów (szerokość/wysokość) — w odróżnieniu od sieci web, nie dopasowują się automatycznie na podstawie pliku.
→ 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
Zrozumienie, jak obsługiwać obrazy i zasoby, jest cenne, ponieważ większość aplikacji wyświetla obrazy, a robienie tego efektywnie wpływa zarówno na UX, jak i wydajność, dlatego jest to przydatna praktyczna wiedza.
Zrozumienie ładowania obrazów — obrazów lokalnych przez require (dołączone podczas budowania), obrazów zdalnych przez uri i ważny fakt, że obrazy wymagają jawnych wymiarów w React Native (w odróżnieniu od sieci web, nie dopasowują się automatycznie) — jest niezbędne do wyświetlania dowolnego obrazu.
Zrozumienie obsługi rozdzielczości (dostarczanie wariantów @2x/@3x, dzięki czemu React Native wybiera odpowiedni dla gęstości pikseli urządzenia, aby obrazy były ostre na wszystkich ekranach) i resizeMode (jak obrazy pasują do swojego pudełka) jest ważne dla obrazów, które dobrze wyglądają na różnych gęstościach ekranu Androida i iOS.
Najważniejsze jest zrozumienie optymalizacji wydajności obrazów, ponieważ obrazy są częstym źródłem problemów z pamięcią i jank (zwłaszcza na listach): używanie odpowiednio dużych obrazów (nie ładowanie ogromnych obrazów do małych widoków, co marnotrawi pamięć i przepustowość), używanie FastImage dla lepszej wydajności obrazów zdalnych i buforowania (aby obrazy nie pobierały się ponownie i listy przewijały się płynnie — znaczna poprawa w stosunku do domyślnego Image dla list bogatych w obrazy), używanie wydajnych formatów (WebP) i leniwe ładowanie z symbolami zastępczymi.
Te optymalizacje są ważne, ponieważ aplikacje bogate w obrazy (popularne — kanały, galerie, profile) mogą cierpieć na rzeczywiste problemy z wydajnością, jeśli obrazy nie są obsługiwane prawidłowo.
Ponieważ większość aplikacji wyświetla obrazy i obsługiwanie ich prawidłowo (poprawne ładowanie i wymiary, warianty rozdzielczości i zwłaszcza optymalizacja wydajności za pomocą buforowania i odpowiedniego skalowania) wpływa zarówno na UX (ostre, szybko ładujące się obrazy), jak i wydajność (unikanie problemów z pamięcią i jank), zrozumienie obrazów i zasobów w React Native jest cenną, praktycznie istotną wiedzą — ważne dla powszechnej potrzeby wyświetlania obrazów, gdzie zrozumienie ładowania, rozdzielczości i zwłaszcza optymalizacji wydajności (buforowanie, skalowanie) jest kluczowe do budowania gładkich, dopracowanych aplikacji bogatych w obrazy.