React Native मध्ये तुम्ही इमेजेस आणि assets कसे हाताळता?

Question

Accepted Answer

React Native apps **इमेजेस** (स्थानिक आणि दूरस्थ) प्रदर्शित करतात आणि **assets** (फॉन्ट्स, इत्यादी) बंडल करतात. इमेजेस कार्यक्षमतेने कसे लोड करायचे, वेगवेगळे रेजोल्यूशन्स कसे हाताळायचे आणि इमेज परफॉर्मन्स कसे ऑप्टिमाइज करायचे हे समजणे चांगल्या 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 ``` ## हे का महत्वाचे आहे इमेजेस आणि assets कसे हाताळायचे हे समजणे मूल्यवान आहे कारण **बहुतेक अॅप्स इमेजेस प्रदर्शित करतात**, आणि हे कार्यक्षमतेने केल्याने UX आणि परफॉर्मन्स दोन्हीवर परिणाम होतो, म्हणून ते उपयोगी व्यावहारिक ज्ञान आहे. **इमेजेस लोड करणे** समजणे — स्थानिक इमेजेस `require` (बिल्ड टाइमला बंडल केलेली) द्वारे, दूरस्थ इमेजेस `uri` द्वारे, आणि महत्वाचा मुद्दा की **React Native मध्ये इमेजेसला स्पष्ट डाइमेंशन्स आवश्यक आहेत** (वेब च्या विपरीत, ते स्वयंचलितपणे साइज होत नाहीत) — कोणतीही इमेज प्रदर्शित करण्यासाठी आवश्यक आहे. **रेजोल्यूशन हँडलिंग** (प्रत्येक डिव्हाइस डेन्सिटीसाठी सर्व स्क्रीनवर तीक्ष्ण इमेजेसाठी React Native योग्य एक निवडणारे @2x/@3x व्हेरिएंट्स प्रदान करणे) आणि **resizeMode** (इमेजेस त्यांच्या बॉक्समध्ये कसे बसतात) समजणे महत्वाचे आहे Android च्या आणि iOS च्या विविध स्क्रीन डेन्सिटीवर चांगले दिसणार्या इमेजेससाठी. सर्वात महत्वाचे म्हणजे, **इमेज परफॉर्मन्स ऑप्टिमाइজेशन** समजणे मूल्यवान आहे कारण **इमेजेस मेमरी समस्या आणि jank चे सामान्य स्रोत आहेत** (विशेषत: सूचीतून): योग्य-आकारची इमेजेस वापरणे (लहान views मध्ये विशाल इमेजेस लोड करू नये, जे मेमरी आणि bandwidth वर्बाद करते), **FastImage** वापरणे दूरस्थ-इमेज परफॉर्मन्सासाठी अधिक चांगल्या आणि **caching** साठी (जेणेकरून इमेजेस पुन्हा डाउनलोड होत नाहीत आणि सूची सहजपणे स्क्रोल होते — डिफॉल्ट Image वरील महत्त्वपूर्ण सुधार इमेज-भारी सूचीसाठी), कार्यक्षम फॉर्मेट्स वापरणे (WebP), आणि प्लेसहोल्डरसह lazy-loading. हे ऑप्टिमाइजेशन्स महत्वाचे आहेत कारण इमेज-भारी अॅप्स (सामान्य — feeds, galleries, profiles) इमेजेस चांगल्या पद्धतीने हाताळले नाहीत तर वास्तविक परफॉर्मन्स समस्यांना सामोरे जाऊ शकतात. बहुतेक अॅप्स इमेजेस प्रदर्शित करत असल्याने आणि त्यांना चांगल्या पद्धतीने हाताळणे (योग्य लोडिंग आणि डाइमेंशन्स, रेजोल्यूशन व्हेरिएंट्स, आणि विशेषत: caching आणि योग्य sizing सह परफॉर्मन्स ऑप्टिमाइजेशन) UX (तीक्ष्ण, सहजपणे-लोड होणार्या इमेजेस) आणि परफॉर्मन्स (मेमरी समस्या आणि jank टाळणे) दोन्हीवर परिणाम करते, React Native मध्ये इमेजेस आणि assets समजणे मूल्यवान, व्यावहारिकदृष्ट्या-संबंधित ज्ञान आहे — इमेजेस प्रदर्शित करण्याच्या सामान्य गरजेसाठी महत्वाचे, जेथे लोडिंग, रेजोल्यूशन, आणि विशेषत: परफॉर्मन्स ऑप्टिमाइजेशन (caching, sizing) समजणे गुळगुळीत, पॉलिश केलेल्या इमेज-समृद्ध अॅप्स बांधण्यासाठी महत्वाचे आहे.