React Native uygulamaları görselleri (yerel ve uzak) görüntüler ve varlıkları (fontlar vb.) paketler. Görselleri verimli bir şekilde yüklemeyi, farklı çözünürlükleri işlemeyi ve görsel performansını optimize etmeyi anlamak iyi UX ve performans için önemlidir.
{ } ;
Yerel görseller require kullanır (paketlenmiş); uzak görseller uri kullanır. Görsellerin açık boyutları (width/height) gereklidir — web'den farklı olarak, dosyadan otomatik boyutlandırılmazlar.
→ 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
Görselleri ve varlıkları nasıl kullanacağını anlamak değerlidir çünkü çoğu uygulama görsel görüntüler ve bunu verimli bir şekilde yapmak hem UX'i hem performansı etkiler, bu nedenle pratik bir bilgidir.
Görselleri yüklemeyi anlamak — require (derleme sırasında paketlenmiş) aracılığıyla yerel görseller, uri aracılığıyla uzak görseller ve React Native'de görsellerin açık boyut gerektirmesi (web'den farklı olarak, otomatik boyutlandırılmazlar) önemli noktası — herhangi bir görsel göstermek için gereklidir.
Çözünürlük işlemeyi (React Native'nin her cihaz yoğunluğu için doğru olanı seçmesi için @2x/@3x varyantları sağlamak, böylece ekranlar arasında net görseller) ve resizeMode'u (görsellerin kutusuna nasıl sığdığı) anlamak, Android'in ve iOS'un çeşitli ekran yoğunluklarında iyi görünen görseller için önemlidir.
En önemlisi, görsel performans optimizasyonunu anlamak değerlidir çünkü görseller yaygın bir bellek sorunu ve takılma kaynağıdır (özellikle listelerde): uygun boyutlu görselleri kullanmak (küçük görünümlere büyük görseller yüklememek, bellek ve bant genişliğini boşa harcayan), FastImage'ı uzak görsel performansı ve cache için kullanmak (böylece görseller yeniden indirilmez ve listeler sorunsuz kaydırılır — varsayılan Image'ın görsel açısından yoğun listeler için önemli bir gelişme), verimli formatlar (WebP) kullanmak ve yer tutucu ile lazy yükleme yapmak.
Bu optimizasyonlar önemlidir çünkü görsel açısından yoğun uygulamalar (yaygın — feed'ler, galeriler, profiller) görseller iyi işlenmezse gerçek performans sorunları yaşayabilir.
Çoğu uygulama görselleri gösterdiği ve onları iyi kullanmanın (doğru yükleme ve boyutlar, çözünürlük varyantları ve özellikle cache ve uygun boyutlandırma ile performans optimizasyonu) hem UX'i (net, hızlı yüklenen görseller) hem performansı (bellek sorunları ve takılma'yı önlemek) etkilediği için, React Native'de görselleri ve varlıkları anlamak değerli, pratik olarak ilgili bir bilgidir — görselleri göstermenin yaygın ihtiyacı için önemlidir, burada yükleme, çözünürlük ve özellikle performans optimizasyonunu (cache, boyutlandırma) anlamak düzgün, parlak görsel açısından yoğun uygulamalar oluşturmak için anahtardır.