React Native मा तपाईले चित्रहरू र assets कसरी सम्भाल्नुहुन्छ?

Question

Accepted Answer

React Native अनुप्रयोगहरूले **चित्रहरू** (स्थानीय र दूरवर्ती) प्रदर्शन गर्छन् र **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` प्रयोग गर्छन्। **चित्रहरूलाई स्पष्ट आयामहरू** (चौडाइ/उचाइ) चाहिन्छ — वेबको विपरीत, तिनीहरू फाइलबाट स्वचालित रूपमा आकार परिवर्तन हुँदैनन्। ## रेजोल्यूशन र 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 मा चित्रहरूलाई स्पष्ट आयामहरू चाहिन्छ** (वेबको विपरीत, तिनीहरू स्वचालित रूपमा आकार परिवर्तन हुँदैनन्) — कुनै पनि चित्र प्रदर्शन गर्न आवश्यक छ। **रेजोल्यूशन सम्भालना** बुझ्न (सफा चित्रहरूको लागि @2x/@3x भेरियन्टहरू प्रदान गर्न ताकि React Native प्रत्येक डिभाइस घनत्वको लागि सही एक चुन्छ) र **resizeMode** (चित्रहरू आफ्नो बक्समा कसरी फिट हुन्छन्) Android र iOS को विविध स्क्रीन घनत्वमा राम्रो दिखिने चित्रहरूको लागि महत्त्वपूर्ण छ। सबैभन्दा महत्त्वपूर्ण कुरा, **चित्र कार्यक्षमता अनुकूलन** बुझ्न मूल्यवान छ किनभने **चित्रहरू स्मृति समस्याहरूको साधारण स्रोत हुन्छन् र jank** (विशेष गरी सूचीमा): उपयुक्त-आकारका चित्रहरू प्रयोग गर्न (विशाल चित्रहरू सानो दृश्यमा लोड गर्न नदिन, जसले स्मृति र ब्यान्डविथ बर्बाद गर्छ), **FastImage** दूरवर्ती-चित्र कार्यक्षमताको लागि र **caching** (ताकि चित्रहरू पुनः डाउनलोड नहोस् र सूचीहरू सहज रूपमा स्क्रोल हुन्छन् — डिफल्ट Image को लागि महत्त्वपूर्ण सुधार चित्र-भारी सूचीहरूको लागि), कुशल ढाँचाहरू (WebP) प्रयोग गर्न, र placeholder को साथ lazy-loading। यी अनुकूलनहरू महत्त्वपूर्ण छन् किनभने चित्र-भारी अनुप्रयोगहरू (साधारण — feeds, galleries, profiles) वास्तविक कार्यक्षमता समस्याहरूको सामना गर्न सक्छन् यदि चित्रहरू राम्रोसँग सम्भाल गरिएको छैन भने। चूँकि अधिकांश अनुप्रयोगहरूले चित्रहरू प्रदर्शन गर्छन् र तिनीहरूलाई राम्रोसँग सम्भाल्न (सही लोडिङ र आयामहरू, रेजोल्यूशन भेरियन्टहरू, र विशेष गरी caching र उपयुक्त sizing को साथ कार्यक्षमता अनुकूलन) दुवै UX (स्पष्ट, चिकनो-लोडिङ चित्रहरू) र कार्यक्षमता (स्मृति समस्याहरू र jank बचाउन) लाई असर गर्छ, React Native मा चित्रहरू र assets बुझ्न मूल्यवान, व्यावहारिक रूपमा प्रासंगिक ज्ञान हो — चित्रहरू प्रदर्शन गरने साधारण आवश्यकताको लागि महत्त्वपूर्ण, जहाँ लोडिङ, रेजोल्यूशन, र विशेष गरी कार्यक्षमता अनुकूलन (caching, sizing) बुझ्न सहज, पॉलिश गरिएको चित्र-समृद्ध अनुप्रयोगहरू निर्माण गर्न कुञ्जी हो।