آپ React Native میں تصویروں اور اثاثوں کو کیسے سنبھالتے ہیں؟

Question

Accepted Answer

React Native ایپلیکیشنز **تصویریں** (مقامی اور دور دراز) دکھاتی ہیں اور **اثاثے** (fonts، وغیرہ) بنڈل کرتی ہیں۔ یہ سمجھنا ضروری ہے کہ تصویروں کو موثر انداز میں کیسے لوڈ کیا جائے، مختلف resolutions کو کیسے سنبھالا جائے، اور تصویر کی کارکردگی کو کیسے بہتر بنایا جائے تاکہ اچھی 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) کی ضرورت ہے — ویب کے برعکس، یہ خود بخود فائل سے سائز نہیں بناتے۔ ## Resolution اور 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` کے ذریعے (build وقت میں بنڈل شدہ)، دور دراز کی تصویریں `uri` کے ذریعے، اور اہم نکتہ یہ کہ **React Native میں تصویروں کو واضح dimensions** کی ضرورت ہے (ویب کے برعکس، وہ خود بخود سائز نہیں بناتے) — کسی بھی تصویر کو دکھانے کے لیے ضروری ہے۔ **Resolution handling** سمجھنا (@2x/@3x variants فراہم کرنا تاکہ React Native ہر ڈیوائس کی کثافت کے لیے صحیح انتخاب کرے تاکہ تصویریں تمام screens میں واضح ہوں) اور **resizeMode** (تصویریں اپنے box میں کیسے فٹ ہوں) ان تصویروں کے لیے اہم ہے جو Android اور iOS کی متنوع screen densities پر اچھی نظر آئیں۔ سب سے اہم بات، **تصویر کی کارکردگی کو بہتر بنانا** سمجھنا قیمتی ہے کیونکہ **تصویریں memory کے مسائل اور jank کا عام ذریعہ ہیں** (خاص طور پر lists میں): مناسب سائز کی تصویریں استعمال کرنا (بڑی تصویریں چھوٹے views میں نہ لوڈ کریں، جو memory اور bandwidth کو ضائع کرتا ہے)، **FastImage** استعمال کرنا بہتر دور دراز تصویر کی کارکردگی اور **caching** کے لیے (تاکہ تصویریں دوبارہ download نہ ہوں اور lists smooth طریقے سے scroll ہوں — default Image کے مقابلے میں image-heavy lists کے لیے نمایاں بہتری)، موثر formats استعمال کرنا (WebP)، اور placeholders کے ساتھ lazy-loading۔ یہ optimizations اہم ہیں کیونکہ image-heavy ایپلیکیشنز (عام — feeds، galleries، profiles) اگر تصویروں کو اچھی طرح سے سنبھالا نہ جائے تو حقیقی کارکردگی کے مسائل سے دوچار ہو سکتی ہیں۔ چونکہ اکثر ایپلیکیشنز تصویریں دکھاتی ہیں اور انہیں اچھی طرح سے سنبھالنا (صحیح loading اور dimensions، resolution variants، اور خاص طور پر caching اور مناسب sizing کے ساتھ کارکردگی کی optimization) UX (واضح، smooth-loading تصویریں) اور کارکردگی (memory کے مسائل اور jank سے بچنا) دونوں کو متاثر کرتا ہے، React Native میں تصویروں اور اثاثوں کو سمجھنا قیمتی، عملی قابل صلاحیت والا علم ہے — تصویریں دکھانے کی عام ضرورت کے لیے اہم، جہاں loading، resolution، اور خاص طور پر کارکردگی کی optimization (caching، sizing) کو سمجھنا smooth، پالش شدہ image-rich ایپلیکیشنز بنانے کے لیے اہم ہے۔