Programu za React Native huonyesha picha (za ndani na za mbali) na hubeba assets (fonts, n.k.). Kuelewa jinsi ya kupakia picha kwa ufanisi, kushughulikia resolutions tofauti, na kuboresha utendaji wa picha ni muhimu kwa UX nzuri na utendaji.
{ } ;
Picha za ndani hutumia require (zilizobeba); picha za mbali hutumia uri. Picha zinahitaji vipimo dhahiri (width/height) — tofauti na wavuti, hazijipangi ukubwa zenyewe kutoka kwa faili.
→ 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
Kuelewa jinsi ya kushughulikia picha na assets ni muhimu kwa sababu programu nyingi huonyesha picha, na kufanya hivyo kwa ufanisi huathiri UX na utendaji, hivyo ni maarifa ya vitendo yenye manufaa.
Kuelewa kupakia picha — picha za ndani kupitia require (zilizobeba wakati wa build), picha za mbali kupitia uri, na jambo muhimu kwamba picha zinahitaji vipimo dhahiri katika React Native (tofauti na wavuti, hazijipangi ukubwa zenyewe) — ni lazima kwa kuonyesha picha yoyote.
Kuelewa ushughulikiaji wa resolution (kutoa variants za @2x/@3x ili React Native ichague sahihi kulingana na density ya kifaa kwa picha kali kwenye skrini zote) na resizeMode (jinsi picha zinavyoendana na sanduku lake) ni muhimu kwa picha zinazoonekana vizuri kwenye densities tofauti za skrini za Android na iOS.
Muhimu zaidi, kuelewa uboreshaji wa utendaji wa picha ni muhimu kwa sababu picha ni chanzo cha kawaida cha matatizo ya memory na jank (hasa katika lists): kutumia picha za ukubwa unaofaa (siyo kupakia picha kubwa katika views ndogo, kunakopoteza memory na bandwidth), kutumia FastImage kwa utendaji bora wa picha za mbali na caching (ili picha zisipakuliwe upya na lists zisogee kwa ulaini — uboreshaji mkubwa juu ya Image ya default kwa lists zenye picha nyingi), kutumia formats zenye ufanisi (WebP), na lazy-loading pamoja na placeholders.
Maboresho haya ni muhimu kwa sababu programu zenye picha nyingi (za kawaida — feeds, galleries, profiles) zinaweza kupata matatizo halisi ya utendaji ikiwa picha hazishughulikiwi vizuri.
Kwa kuwa programu nyingi huonyesha picha na kuzishughulikia vizuri (upakiaji na vipimo sahihi, variants za resolution, na hasa uboreshaji wa utendaji pamoja na caching na ukubwa unaofaa) huathiri UX (picha kali zinazopakia kwa ulaini) na utendaji (kuepuka matatizo ya memory na jank), kuelewa picha na assets katika React Native ni maarifa muhimu na yenye umuhimu wa vitendo — muhimu kwa hitaji la kawaida la kuonyesha picha, ambapo kuelewa upakiaji, resolution, na hasa uboreshaji wa utendaji (caching, ukubwa) ndio ufunguo wa kujenga programu laini na za hali ya juu zenye picha nyingi.