React Native aplikacije prikazujejo slike (lokalne in oddaljene) in vključujejo sredstva (pisave itn.). Razumevanje, kako učinkovito naložiti slike, obravnavati različne ločljivosti in optimizirati zmogljivost slik je pomembno za dobro uporabniško izkušnjo in zmogljivost.
{ } ;
Lokalne slike uporabljajo require (priložene); oddaljene slike uporabljajo uri. Slike potrebujejo izrecne dimenzije (width/height) — za razliko od weba se ne samodejno prilagodijo velikosti datoteke.
→ 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
Razumevanje, kako obravnavati slike in sredstva, je dragoceno, ker večina aplikacij prikazuje slike, in če to naredite učinkovito, vpliva na uporabniško izkušnjo in zmogljivost, zato je to koristno praktično znanje.
Razumevanje nalaganja slik — lokalnih slik prek require (priloženo ob izdelavi), oddaljenih slik prek uri in pomembne točke, da slike potrebujejo izrecne dimenzije v React Native (za razliko od weba, se ne samodejno prilagodijo) — je potrebno za prikaz katere koli slike.
Razumevanje obravnave ločljivosti (zagotavljanje variant @2x/@3x, tako da React Native izbere pravo za gostoto naprave za ostre slike na različnih zaslonih) in resizeMode (kako se slike prilegajo njihovemu polju) je pomembno za slike, ki so lepe na različnih gostotah zaslona Androida in iOS-a.
Najpomembneje pa je razumevanje optimizacije zmogljivosti slik, ker so slike pogost vir težav s pomnilnikom in "jank" (posebej v seznamih): uporaba pravilno velikih slik (ne nalaganje ogromnih slik v majhne prikaze, kar zmanjša pomnilnik in pasovno širino), uporaba FastImage za boljšo zmogljivost oddaljenih slik in predpomnjenje (tako da se slike ne prenašajo ponovno in se seznami gladko premikajo — pomembna izboljšava v primerjavi z privzetim Image za sezname bogate s slikami), uporaba učinkovitih oblik (WebP) in odloženo nalaganje s plačniki.
Te optimizacije so pomembne, ker lahko aplikacije bogate s slikami (pogosta — feed-ovi, galerije, profili) doživijo resnične težave z zmogljivostjo, če slike niso pravilno obravnavane.
Ker večina aplikacij prikazuje slike in jih pravilna obravnava (pravilno nalaganje in dimenzije, variante ločljivosti in še posebej optimizacija zmogljivosti s predpomnjenjemm in ustrezno velikostjo) vpliva na uporabniško izkušnjo (ostre, hitro naložene slike) in zmogljivost (izogib težavam s pomnilnikom in »jank«), je razumevanje slik in sredstev v React Native dragoceno, praktično relevantno znanje — pomembno za pogosto potrebo po prikazu slik, kjer je razumevanje nalaganja, ločljivosti in še posebej optimizacije zmogljivosti (predpomnjenje, določanje velikosti) ključno za izgradnjo gladkih, nefinih aplikacij bogatih s slikami.