ਤੁਸ ਰੀਐਕਟ ਨੇਟਿਵ ਵਿੱਚ ਚਿੱਤਰਾਂ ਅਤੇ ਸਰੋਤਾਂ (assets) ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲਦੇ ਹੋ?

Question

Accepted Answer

ਰੀਐਕਟ ਨੇਟਿਵ ਐਪਲੀਕੇਸਨਾਂ **ਚਿੱਤਰ** (ਸਥਾਨਕ ਅਤੇ ਰਿਮੋਟ) ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੀਆਂ ਹਨ ਅਤੇ **ਸਰੋਤਾਂ** (fonts, ਆਦਿ) ਨੂੰ ਬੰਡਲ ਕਰਦੀਆਂ ਹਨ। ਚਿੱਤਰਾਂ ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਲੋਡ ਕਰਨਾ, ਵੱਖ-ਵੱਖ ਰੈਜ਼ੋਲਿਊਸ਼ਨਾਂ ਨੂੰ ਸੰਭਾਲਣਾ, ਅਤੇ ਚਿੱਤਰ ਦੀ ਕਾਰਕਰਦਗੀ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣਾ ਵਧੀਆ 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 ``` ## ਇਹ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ ਚਿੱਤਰਾਂ ਅਤੇ ਸਰੋਤਾਂ ਨੂੰ ਸੰਭਾਲਣ ਬਾਰੇ ਸਮਝ ਮਾਇਨੇ ਰੱਖਦੀ ਹੈ ਕਿਉਂਕਿ **ਜ਼ਿਆਦਾਤਰ ਐਪਸ ਚਿੱਤਰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੀਆਂ ਹਨ**, ਅਤੇ ਅਜਿਹਾ ਕਰਨਾ ਕੁਸ਼ਲਤਾ ਨਾਲ ਵਰਤੋਂ ਕਰਨ ਵਾਲੇ ਅਨੁਭਵ ਅਤੇ ਕਾਰਕਰਦਗੀ ਦੋਵਾਂ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ ਇਹ ਕਿਰਿਆਤਮਕ ਗਿਆਨ ਹੈ। **ਚਿੱਤਰਾਂ ਨੂੰ ਲੋਡ ਕਰਨਾ** ਸਮਝਣਾ — `require` (ਬਿਲਡ ਸਮੇਂ ਬੰਡਲ ਕੀਤਾ) ਦੁਆਰਾ ਸਥਾਨਕ ਚਿੱਤਰ, `uri` ਦੁਆਰਾ ਰਿਮੋਟ ਚਿੱਤਰ, ਅਤੇ ਮਹੱਤਵਪੂਰਨ ਬਿੰਦੂ ਕਿ **ਚਿੱਤਰਾਂ ਨੂੰ ਰੀਐਕਟ ਨੇਟਿਵ ਵਿੱਚ ਸਪੱਸ਼ਟ ਮਾਪ ਦੀ ਲੋੜ ਹੈ** (ਵੈਬ ਦੇ ਉਲਟ, ਉਹ ਸਵੈ-ਆਕਾਰ ਨਹੀਂ ਲੈਂਦੇ) — ਕਿਸੇ ਵੀ ਚਿੱਤਰ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਜ਼ਰੂਰੀ ਹੈ। **ਰੈਜ਼ੋਲਿਊਸ਼ਨ ਹੈਂਡਲਿੰਗ** (@2x/@3x ਭਿੰਨਤਾਵਾਂ ਪ੍ਰਦਾਨ ਕਰਨਾ ਤਾਂ ਕਿ ਰੀਐਕਟ ਨੇਟਿਵ ਹਰ ਡਿਵਾਇਸ ਘਣਤਾ ਲਈ ਸਹੀ ਚਿੱਤਰ ਚੁਣੇ ਅਤੇ ਸਕ੍ਰੀਨਾਂ ਪਾਰ ਸਾਫ ਚਿੱਤਰ ਪ੍ਰਾਪਤ ਹੋਣ) ਅਤੇ **resizeMode** (ਚਿੱਤਰ ਆਪਣੇ ਬਾਕਸ ਵਿੱਚ ਕਿਵੇਂ ਫਿੱਟ ਹੁੰਦਾ ਹੈ) ਸਮਝਣਾ ਚਿੱਤਰਾਂ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ ਜੋ Android ਅਤੇ iOS ਦੀ ਵਿਭਿੰਨ ਸਕ੍ਰੀਨ ਘਣਤਾ ਵਿੱਚ ਵਧੀਆ ਲੱਗਦੇ ਹਨ। ury ਮਹੱਤਵਪੂਰਨ ਤੌਰ ਤੇ, **ਚਿੱਤਰ ਕਾਰਕਰਦਗੀ ਅਨੁਕੂਲਨ** ਸਮਝਣਾ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ ਕਿਉਂਕਿ **ਚਿੱਤਰ ਮੈਮਰੀ ਸਮੱਸਿਆਆਂ ਅਤੇ jank ਦਾ ਇੱਕ ਆਮ ਸ੍ਰੋਤ ਹਨ** (ਖ਼ਾਸ ਕਰਕੇ ਸੂਚੀਆਂ ਵਿੱਚ): ਢੁਕਵੇਂ-ਆਕਾਰ ਦੀਆਂ ਚਿੱਤਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ (ਵੱਡੀਆਂ ਚਿੱਤਰਾਂ ਨੂੰ ਛੋਟੀਆਂ views ਵਿੱਚ ਲੋਡ ਨਾ ਕਰਨਾ, ਜੋ ਮੈਮਰੀ ਅਤੇ ਬੈਂਡਵਿਡਥ ਬਰਬਾਦ ਕਰਦਾ ਹੈ), **FastImage** ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਰਿਮੋਟ-ਚਿੱਤਰ ਕਾਰਕਰਦਗੀ ਲਈ ਬਿਹਤਰ ਹੈ ਅਤੇ **caching** (ਇਸ ਲਈ ਚਿੱਤਰ ਦੁਬਾਰਾ ਡਾউਨਲੋਡ ਨਹੀਂ ਹੁੰਦੇ ਅਤੇ ਸੂਚੀਆਂ ਨਿਰਵਿਘਨ ਢੰਗ ਨਾਲ ਸਕ੍ਰੌਲ ਹੁੰਦੀਆਂ ਹਨ — ਡਿਫਾਲਟ Image ਤੋਂ ਪਰ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਬਿਹਤਰੀ ਚਿੱਤਰ-ਭਰਪੂਰ ਸੂਚੀਆਂ ਲਈ), ਕੁਸ਼ਲ ਫਾਰਮੈਟ (WebP) ਦੀ ਵਰਤੋਂ ਕਰਨਾ, ਅਤੇ placeholders ਨਾਲ lazy-loading। ਇਹ ਅਨੁਕੂਲਨ ਮਾਇਨੇ ਰੱਖਦੇ ਹਨ ਕਿਉਂਕਿ ਚਿੱਤਰ-ਭਰਪੂਰ apps (ਆਮ — feeds, galleries, profiles) ਅਸਲ ਕਾਰਕਰਦਗੀ ਸਮੱਸਿਆਵਾਂ ਨਾਲ ਤਕਲੀਫ ਵਿੱਚ ਆ ਸਕਦੀਆਂ ਹਨ ਜੇ ਚਿੱਤਰ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸੰਭਾਲੇ ਨਾ ਜਾਣ। ਕਿਉਂਕਿ ਜ਼ਿਆਦਾਤਰ apps ਚਿੱਤਰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੀਆਂ ਹਨ ਅਤੇ ਸਾਕਾ ਢੰਗ ਨਾਲ ਸੰਭਾਲਣਾ (ਸਹੀ ਲੋਡਿੰਗ ਅਤੇ ਮਾਪ, ਰੈਜ਼ੋਲਿਊਸ਼ਨ ਭਿੰਨਤਾਵਾਂ, ਅਤੇ ਖ਼ਾਸ ਕਰਕੇ caching ਅਤੇ ਢੁਕਵੀਂ sizing ਨਾਲ ਕਾਰਕਰਦਗੀ ਅਨੁਕੂਲਨ) ਵਰਤੋਂ ਕਰਨ ਵਾਲੇ ਅਨੁਭਵ (ਸਾਫ, ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਹੋ ਰਹੇ ਚਿੱਤਰ) ਅਤੇ ਕਾਰਕਰਦਗੀ (ਮੈਮਰੀ ਸਮੱਸਿਆਵਾਂ ਅਤੇ jank ਤੋਂ ਬਚਨਾ) ਦੋਵਾਂ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਦਾ ਹੈ, ਚਿੱਤਰਾਂ ਅਤੇ ਸਰੋਤਾਂ ਨੂੰ ਰੀਐਕਟ ਨੇਟਿਵ ਵਿੱਚ ਸਮਝਣਾ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ, ਅਭਿਆਸ-ਸੰਬੰਧੀ ਜਾਣਕਾਰੀ — ਚਿੱਤਰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਦੀ ਆਮ ਲੋੜ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ, ਜਿੱਥੇ loading, resolution, ਅਤੇ ਖ਼ਾਸ ਕਰਕੇ ਕਾਰਕਰਦਗੀ ਅਨੁਕੂਲਨ (caching, sizing) ਨੂੰ ਸਮਝਣਾ ਨਿਰਵਿਘਨ, ਪਾਲਿਸ਼ ਕੀਤੀ ਹੋਈ ਚਿੱਤਰ-ਅਮੀਰ apps ਬਣਾਉਣ ਲਈ ਮੁੱਖ ਹੈ।