Piyé carane nangani gambar lan aset ing React Native?

Question

Accepted Answer

Aplikasi React Native nampilake **gambar** (lokal lan jauh) lan bundle **aset** (font, lsp.). Pangertèn carane muatake gambar kanthi efisien, nangani resolusi béda-béda, lan ngoptimalake kinerja gambar penting kanggo UX lan kinerja sing apik. ## Muatake gambar ```jsx import { Image } from 'react-native'; // LOCAL image (bundled with the app) — required at build time // REMOTE image (from a URL) — needs explicit dimensions ``` Gambar lokal nggunakake `require` (bundled); gambar jauh nggunakake `uri`. **Gambar perlu dimensi eksplisit** (width/height) — ora kaya web, ora otomatis ukuran saka file. ## Resolusi lan resizeMode ```text → RESOLUTION: provide @2x and @3x variants (logo.png, logo@2x.png, logo@3x.png) → RN picks the right one per device density (crisp on all screens) → resizeMode: cover / contain / stretch / center → how the image fits its box ``` ## Kinerja: optimalake gambar ```text ✓ 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 ``` ## Apa pangertèn Pangertèn cara nangani gambar lan aset penting amarga **paling-paling aplikasi nampilake gambar**, lan nindakake kanthi efisien mengarohi UX lan kinerja, mula kaanggap kaweruh praktis sing berguna. Pangertèn **muatake gambar** — gambar lokal liwat `require` (bundled ing wektu build), gambar jauh liwat `uri`, lan poin penting yen **gambar perlu dimensi eksplisit** ing React Native (ora kaya web, ora otomatis ukuran) — kudu kanggo nampilake gambar. Pangertèn **penanganan resolusi** (nyedhiyake varian @2x/@3x supaya React Native milih sing tepat saben kapadatan piranti kanggo gambar crisp ing layar macem-macem) lan **resizeMode** (carane gambar pas kothake) penting kanggo gambar sing katon apik ing kapadatan layar Android lan iOS sing macem-macem. Sang paling penting, pangertèn **optimalake kinerja gambar** berguna amarga **gambar minangka sumber umum masalah memori lan jank** (utamane ing daftar): nggunakake gambar ukuran pas (ora muatake gambar gede ing tampilan cilik, sing mbuang-buang memori lan bandwidth), nggunakake **FastImage** kanggo kinerja gambar jauh luwih apik lan **caching** (supaya gambar ora mudhun maneh lan daftar scroll mulus — perbaikan signifikan liwat Image standar kanggo daftar sarat gambar), nggunakake format efisien (WebP), lan lazy-loading karo placeholder. Optimalake iki penting amarga aplikasi sarat gambar (umum — feed, galeri, profil) bisa nandhang masalah kinerja nyata yen gambar ora ditangani apik. Lawas paling aplikasi nampilake gambar lan nangani kanthi apik (loading lan dimensi bener, varian resolusi, lan utamane optimalake kinerja karo caching lan ukuran pas) mengarohi UX (gambar crisp, ngisi mulus) lan kinerja (ngindari masalah memori lan jank), pangertèn gambar lan aset ing React Native kaanggap kaweruh berguna, relevan praktis — penting kanggo kabutuhan umum nampilake gambar, sing pangertène loading, resolusi, lan utamane optimalake kinerja (caching, ukuran) adalah kunci kanggo mbangun aplikasi sarat gambar sing mulus lan polished.