તમે React Native માં ઇમેજીસ અને એસેટ્સ કેવી રીતે હેન્ડલ કરો છો?

Question

Accepted Answer

React Native એપ્લિકેશન્સ **ઇમેજીસ** (લોકલ અને રીમોટ) પ્રદર્શિત કરે છે અને **એસેટ્સ** (ફોન્ટ્સ, વગેરે) બન્ડલ કરે છે। ઇમેજીસ કુશળતાથી લોડ કરવા, વિવિધ રેજોલ્યુશનો હેન્ડલ કરવા અને ઇમેજ પરફોર્મેન્સને অপ્ટિમાઇઝ કરવા સમજવું સારી UX અને પરફોર્મેન્સ માટે મહત્વપૂર્ણ છે. ## ઇમેજીસ લોડ કરવી ```jsx import { Image } from 'react-native'; // LOCAL image (bundled with the app) — required at build time // REMOTE image (from a URL) — needs explicit dimensions ``` લોકલ ઇમેજીસ `require` (બન્ડલ થયેલ) વાપરે છે; રીમોટ ઇમેજીસ `uri` વાપરે છે. **ઇમેજીસને સ્પષ્ટ આકાર** (width/height) જોઈએ — વેબથી અલગ, તેઓ ફાઇલ પરથી આપોઆપ સાઈજ થતી નથી. ## રેજોલ્યુશન અને 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 ``` ## પરફોર્મેન્સ: ઇમેજીસ અપ્ટિમાઈઝ કરો ```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 ``` ## તે શા માટે મહત્વપૂર્ણ છે ઇમેજીસ અને એસેટ્સ હેન્ડલ કરવા કેવી રીતે તે સમજવું મૂલ્યવાન છે કારણ કે **મોટાભાગની એપ્લિકેશન્સ ઇમેજીસ પ્રદર્શિત કરે છે**, અને તે કુશળતાથી કરવું UX અને પરફોર્મેન્સ બંને ને અસર કરે છે, તેથી તે ઉપયોગી વ્યવહારુ જ્ઞાન છે. **ઇમેજીસ લોડ કરવી** સમજવું — `require` (બિલ્ડ સમયે બન્ડલ થયેલ) દ્વારા લોકલ ઇમેજીસ, `uri` દ્વારા રીમોટ ઇમેજીસ, અને મહત્વપૂર્ણ બાબત કે **React Native માં ઇમેજીસને સ્પષ્ટ આકાર જોઈએ** (વેબથી અલગ, તેઓ આપોઆપ સાઈજ થતી નથી) — કોઈપણ ઇમેજ પ્રદર્શિત કરવા માટે જરૂરી છે. **રેજોલ્યુશન હેન્ડલિંગ** (દરેક ડિવાઇસ ડેન્સિટી માટે સ્પષ્ટ ઇમેજીસ આધુનિક સ્ક્રીનમાં @2x/@3x વેરિયન્ટ્સ પ્રદાન કરીને) અને **resizeMode** (ઇમેજીસ તેમના બોક્સમાં કેવી રીતે ફિટ થાય) સમજવું એ એવી ઇમેજીસ માટે મહત્વપૂર્ણ છે જે Android અને iOS ના વૈવિધ્યસભર સ્ક્રીન ડેન્સિટીમાં સારી દેખાય. સૌથી મહત્વપૂર્ણ રીતે, **ઇમેજ પરફોર્મેન્સ અપ્ટિમાઇઝેશન** સમજવું મૂલ્યવાન છે કારણ કે **ઇમેજીસ મેમરી સમસ્યાઓ અને jank ના સામાન્ય સ્ત્રોત છે** (ખાસ કરીને સૂચીમાં): યોગ્ય-સાઈજની ઇમેજીસ (વિશાળ ઇમેજીસ નાના દૃશ્યમાં લોડ કર્યા વિનાં, જે મેમરી અને બેન્ડવિડ્થ બર્બાદ કરે), **FastImage** વધુ સારી રીમોટ-ઇમેજ પરફોર્મેન્સ માટે વાપર કરવા અને **કેશિંગ** (તેથી ઇમેજીસ ફરીથી ડાઉનલોડ થતી નથી અને સૂચીઓ સરળતાથી સ્ક્રોલ થાય — ઇમેજ-ભરેલ સૂચીઓ માટે ડિફોલ્ટ Image પર નોંધપાત્ર સુધાર), કાર્યક્ષમ ફોર્મેટ્સ (WebP) વાપર કરવા, અને placeholder સાથે lazy-લોડ કરવા. યે અપ્ટિમાઇઝેશન્સ મહત્વપૂર્ણ છે કારણ કે ઇમેજ-ભરેલ એપ્લિકેશન્સ (સામાન્ય — ફીડ્સ, ગ્યાલરીઓ, પ્રોફાઇલ્સ) વાસ્તવિક પરફોર્મેન્સ સમસ્યાઓથી પીડિત થઈ શકે છે જો ઇમેજીસ સારી રીતે હેન્ડલ કરવામાં આવતી નથી. મોટાભાગની એપ્લિકેશન્સ ઇમેજીસ પ્રદર્શિત કરે છે અને તેમને સારી રીતે હેન્ડલ કરવું (યોગ્ય લોડિંગ અને આકાર, રેજોલ્યુશન વેરિયન્ટ્સ, અને ખાસ કરીને કેશિંગ અને યોગ્ય સાઈજિંગ સાથે પરફોર્મેન્સ અપ્ટિમાઇઝેશન) UX (સ્પષ્ટ, સરળતાથી-લોડ થતી ઇમેજીસ) અને પરફોર્મેન્સ (મેમરી સમસ્યાઓ અને jank ટાળવા) બંને ને અસર કરે છે, તેથી React Native માં ઇમેજીસ અને એસેટ્સ સમજવું મૂલ્યવાન, વ્યવહારુ રીતે પ્રાસંગિક જ્ઞાન છે — ઇમેજીસ પ્રદર્શિત કરવાની સામાન્ય જરૂરિયાત માટે મહત્વપૂર્ણ, જ્યાં લોડિંગ, રેજોલ્યુશન અને ખાસ કરીને પરફોર્મેન્સ અપ્ટિમાઇઝેશન (કેશિંગ, સાઈજિંગ) સમજવું કી છે સરળ, પૈલીશ્ડ ઇમેજ-સમૃદ્ધ એપ્લિકેશન્સ બનાવવા માટે.