Aplicațiile React Native afișează imagini (locale și de la distanță) și includ active (fonturi, etc.). Înțelegerea modului de încărcare eficientă a imaginilor, gestionarea diferitelor rezoluții și optimizarea performanței imaginilor este importantă pentru o bună experiență utilizator și performanță.
{ } ;
Imagini locale utilizează require (incluse în pachet); imagini de la distanță utilizează o uri. Imaginile au nevoie de dimensiuni explicite (width/height) — spre deosebire de web, acestea nu se redimensionează automat din fișier.
→ 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
Înțelegerea modului de gestionare a imaginilor și activelor este valoroasă deoarece majoritatea aplicațiilor afișează imagini, iar procedura eficientă afectează atât experiența utilizatorului, cât și performanța, deci este o cunoaștere practică utilă.
Înțelegerea încărcării imaginilor — imagini locale prin require (incluse la momentul compilării), imagini de la distanță prin uri, și punctul important că imaginile au nevoie de dimensiuni explicite în React Native (spre deosebire de web, nu se redimensionează automat) — este necesară pentru afișarea oricărei imagini.
Înțelegerea gestionării rezoluției (furnizarea variantelor @2x/@3x pentru ca React Native să aleagă cea corectă în funcție de densitatea dispozitivului pentru imagini clare pe diverse ecrane) și resizeMode (cum se potrivesc imaginile în cutia lor) este importantă pentru imagini care arată bine pe densitățile de ecran diverse ale Android-ului și iOS-ului.
Cel mai important, înțelegerea optimizării performanței imaginilor este valoroasă deoarece imaginile sunt o sursă comună de probleme de memorie și jank (mai ales în liste): utilizarea imaginilor redimensionate corespunzător (fără a încărca imagini gigantice în vizualizări mici, care irosește memorie și lățimea de bandă), utilizarea FastImage pentru o performanță mai bună a imaginilor de la distanță și cache-ing (pentru ca imaginile să nu se descarce din nou și listele să deruleze neted — o îmbunătățire semnificativă peste Image implicit pentru liste cu imagini abundente), utilizarea formatelor eficiente (WebP), și lazy-loading cu placeholder-e.
Aceste optimizări sunt importante deoarece aplicațiile cu imagini abundente (comune — feeduri, galerii, profiluri) pot suferi probleme de performanță reale dacă imaginile nu sunt gândite bine.
Deoarece majoritatea aplicațiilor afișează imagini și gestionarea lor bună (încărcare corectă și dimensiuni, variante de rezoluție, și mai ales optimizarea performanței cu cache-ing și redimensionare corespunzătoare) afectează atât experiența utilizatorului (imagini clare și cu încărcare netedă), cât și performanța (evitarea problemelor de memorie și jank), înțelegerea imaginilor și activelor în React Native este o cunoaștere valoroasă și practic relevantă — importantă pentru nevoia comună de afișare a imaginilor, unde înțelegerea încărcării, rezoluției, și mai ales optimizarea performanței (cache-ing, redimensionare) este esențială pentru construirea aplicațiilor netede, rafinate și bogate în imagini.