React Native programos rodo vaizdus (vietinius ir nuotolinius) ir supaketina išteklius (šriftus ir kt.). Supratimas, kaip efektyviai įkelti vaizdus, tvarkyti skirtingas skiriamąsias gebas ir optimizuoti vaizdo našumą, yra svarbus geram vartotojo patirčiai ir našumui.
{ } ;
Vietiniai vaizdai naudoja require (supaketinti); nuotoliniai vaizdai naudoja uri. Vaizdams reikalinami aiškūs matmenys (plotis/aukštis) — skirtingai nei žiniatinklyje, jie neautomatiškai nepersprendžiami pagal failą.
→ 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
Supratimas, kaip tvarkyti vaizdus ir išteklius, yra vertingas, nes dauguma programų rodo vaizdus, o tai efektyviai daryti veikia tiek vartotojo patirtį, tiek našumą, todėl tai naudinga praktinė žinios.
Supratimas apie vaizdų įkėlimą — vietinius vaizdus per require (supaketinti sukūrimo metu), nuotolinius vaizdus per uri, ir svarbų faktą, kad vaizdams React Native reikalingi aiškūs matmenys (skirtingai nei žiniatinklyje, jie neautomatiškai nepersprendžiami) — yra būtinas bet kurio vaizdo rodymui.
Supratimas apie skiriamosios gebos tvarkymą (teikiamos @2x/@3x variacijos, kad React Native pasirinktų tinkamą pagal įrenginio tankį ir vaizdai būtų aiškūs visose ekranuose) ir resizeMode (kaip vaizdai tilpsta jų dėžėje) — yra svarbus vaizdams, kurie atrodo gerai Android ir iOS įvairialypių ekranų tankiuose.
Svarbiausias dalykas — supratimas apie vaizdo našumo optimizavimą yra vertingas, nes vaizdai yra dažnas atminties problemų ir sudtrūkimų šaltinis (ypač sąrašuose): naudoti tinkamo dydžio vaizdus (neįkelti didžiulių vaizdų į mažus rodinius, tai švaisty atmintį ir tarpinį ryšį), naudoti FastImage geresniam nuotolinio vaizdo našumui ir talpinimui (todėl vaizdai neatsisiunčia iš naujo ir sąrašai sklandžiai slenkasi — žymus patobulinimas palyginti su numatytuoju Image vaizdo intensyviems sąrašams), naudoti efektyvius formatus (WebP) ir tingų įkėlimą su vietos žymekliais.
Šie optimizavimai svarbūs, nes vaizdo intensyvios programos (dažnos — šaltiniai, galerijos, profiliai) gali patirti tikras našumo problemas, jei vaizdai nėra tvarkomi tinkamai.
Kadangi dauguma programų rodo vaizdus ir jų tvarkymą gerai (teisingas įkėlimas ir matmenys, skiriamosios gebos variacijos, ypač našumo optimizavimas su talpinimu ir tinkamu dydžiu) veikia tiek vartotojo patirtį (aiškūs, greitai įkeliami vaizdai), tiek našumą (vengiama atminties problemų ir sudtrūkimų), supratimas apie vaizdus ir išteklius React Native yra vertinga, praktiškai aktuali žinios — svarbi dažnam vaizdų rodymo poreikiui, kai supratimas apie įkėlimą, skiriamąją gebą, ir ypač našumo optimizavimą (talpinimas, dydis) yra raktas kurti sklandžias, elegantiškas vaizdo intensyvias programas.