Yaya kuke ɗaukar hotuna da kayan aiki a cikin React Native?

Question

Accepted Answer

Aikine React Native suna nuni da **hotuna** (na gida da na nesa) da kunna **kayan aiki** (fonts, da sauransu). Fahimtar yanda ake loda hotuna da kyau, ɗaukar ƙuduri daban-daban, da gyara aiki na hoto yana da mahimmanci don kyau da aiki. ## Loda hotuna ```jsx import { Image } from 'react-native'; // LOCAL image (bundled with the app) — required at build time // REMOTE image (from a URL) — needs explicit dimensions ``` Hotuna na gida suna amfani da `require` (da aka kulli); hotuna na nesa suna amfani da `uri`. **Hotuna kuna bukatar nisbai na bayyane** (faɗi/tsayi) — ba kamar gida ba, ba sa saita kansu jiya fili. ## Ƙuduri da 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 ``` ## Aiki: gyara hotuna ```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 ``` ## Yaya ake ɗaukar mahimmanci Fahimtar yanda ake ɗaukar hotuna da kayan aiki yana da mahimmanci ne saboda **yawancin aikine suna nuni da hotuna**, kuma yin haka da kyau yana shafar duka UX da aiki, saboda haka yana da mahimmanci ilmi na aikace. Fahimtar **loda hotuna** — hotuna na gida ta hanyar `require` (da aka kulli a lokacin gida), hotuna na nesa ta hanyar `uri`, da abin da ya saba cewa **hotuna kuna bukatar nisbai na bayyane** a cikin React Native (ba kamar gida ba, ba sa saita kansu jiya fili) — yana da mahimmanci don nuni ga hoto ta hankali. Fahimtar **ɗaukar ƙuduri** (samar da @2x/@3x saiti don React Native ya zaɓi daidai ɗaya bisa yawa na abin kulli don gida mai faɗi a kan alamomi daban-daban) da **resizeMode** (yaya hotuna ke cika akwati) yana da mahimmanci don hotuna da ke nuni da kyau akan yawa na allo na Android da iOS. \/Mafi mahimmanci, fahimtar **gyara aiki na hoto** yana da mahimmanci ne saboda **hotuna sune tushen matsaloli na alaƙa da jank** (musamman a cikin jeri): amfani da hotuna da uke da kyau (ba loda hotuna masu girman kaifi a gida maiƙanƙanci, wanda ya kashe alaƙa da bandwidth), amfani da **FastImage** don aiki na hoto na nesa da **ajiya** (saboda hotuna ba sa sake bugi kuma jeri ta yi amfani — sakamako mai ban sha'awa a gida Image), amfani da tsarin aiki (WebP), da lazy-loda da nuni. Wannan gyarawa suna da mahimmanci ne saboda aikine mai hoto (gida — abajiye, gida-hotunan, ƙilaƙila) na iya sha sha'awa da matsaloli na gaskiya idan hotuna ba a ɗauka da kyau ba. Tunda yawancin aikine suna nuni da hotuna da ɗaukar kansu da kyau (daidaitaccen loda da nisbai, saiti na ƙuduri, da musamman gyara aiki da ajiya da daidaitaccen girman) yana shafar duka UX (hotuna mai faɗi, mabugaje da kyau) da aiki (kaɓe matsaloli na alaƙa da jank), fahimtar hotuna da kayan aiki a cikin React Native yana da mahimmanci, ilmi mai dogaro na aikace — mahimmanci don bukatuwar gida na nuni ga hotuna, inda fahimtar loda, ƙuduri, da musamman gyara aiki (ajiya, girman) yana ƙayyade a gina hotuna-mai-yawa, da tsada aikine.