Aplikasi React Native memaparkan imej (tempatan dan jarak jauh) dan membungkus aset (fonts, dll.). Memahami cara memuatkan imej dengan cekap, mengendalikan resolusi berbeza, dan mengoptimumkan prestasi imej adalah penting untuk UX dan prestasi yang baik.
{ } ;
Imej tempatan menggunakan require (dibungkus); imej jarak jauh menggunakan uri. Imej memerlukan dimensi eksplisit (width/height) — tidak seperti web, ia tidak auto-size daripada fail.
→ RESOLUSI: sediakan varian @2x dan @3x (logo.png, [email protected], [email protected]) → RN
memilih yang betul per ketumpatan peranti (jelas pada semua skrin)
→ resizeMode: cover / contain / stretch / center → cara imej muat dalam kotaknya
✓ Gunakan imej yang SESUAI SAIZNYA (jangan muatkan imej besar ke dalam views kecil — membazir
memory/bandwidth)
✓ FastImage (react-native-fast-image) → prestasi imej jarak jauh lebih baik + CACHING
(cache imej supaya ia tidak re-download; lebih lancar daripada Image lalai untuk lists)
✓ Gunakan FORMAT yang betul (WebP untuk saiz lebih kecil); lazy-load; placeholders semasa loading
✓ Imej ialah sumber lazim isu memory / jank dalam lists → optimumkan
Memahami cara mengendalikan imej dan aset adalah berharga kerana kebanyakan aplikasi memaparkan imej, dan melakukannya dengan cekap mempengaruhi kedua-dua UX dan prestasi, jadi ia pengetahuan praktikal yang berguna.
Memahami memuatkan imej — imej tempatan melalui require (dibungkus pada masa build), imej jarak jauh melalui uri, dan perkara penting bahawa imej memerlukan dimensi eksplisit dalam React Native (tidak seperti web, ia tidak auto-size) — adalah perlu untuk memaparkan sebarang imej.
Memahami pengendalian resolusi (menyediakan varian @2x/@3x supaya React Native memilih yang betul per ketumpatan peranti untuk imej yang jelas merentas skrin) dan resizeMode (cara imej muat dalam kotaknya) adalah penting untuk imej yang kelihatan baik pada ketumpatan skrin Android dan iOS yang pelbagai.
Yang paling penting, memahami pengoptimuman prestasi imej adalah berharga kerana imej ialah sumber lazim isu memory dan jank (terutamanya dalam lists): menggunakan imej yang sesuai saiznya (tidak memuatkan imej besar ke dalam views kecil, yang membazir memory dan bandwidth), menggunakan FastImage untuk prestasi imej jarak jauh yang lebih baik dan caching (supaya imej tidak re-download dan lists scroll dengan lancar — peningkatan ketara berbanding Image lalai untuk lists yang banyak imej), menggunakan format yang cekap (WebP), dan lazy-loading dengan placeholders.
Pengoptimuman ini penting kerana aplikasi yang banyak imej (lazim — feeds, galleries, profiles) boleh mengalami masalah prestasi sebenar jika imej tidak dikendalikan dengan baik.
Memandangkan kebanyakan aplikasi memaparkan imej dan mengendalikannya dengan baik (loading dan dimensi yang betul, varian resolusi, dan terutamanya pengoptimuman prestasi dengan caching dan saiz yang sesuai) mempengaruhi kedua-dua UX (imej yang jelas dan loading lancar) dan prestasi (mengelakkan isu memory dan jank), memahami imej dan aset dalam React Native ialah pengetahuan yang berharga dan relevan secara praktikal — penting untuk keperluan lazim memaparkan imej, di mana memahami loading, resolusi, dan terutamanya pengoptimuman prestasi (caching, saiz) ialah kunci untuk membina aplikasi yang banyak imej yang lancar dan halus.