React Native-இல் படங்கள் மற்றும் சொத்துக்களை (assets) எவ்வாறு கையாளுவீர்கள்?

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 மாறுபாடுகளை வழங்குவது எனவே React Native ஒவ்வொரு சாதனப் அடர்த்திக்கும் சரியான பதிப்பைத் தேர்ந்தெடுக்கிறது, திரைகள் முழுவதுமாக தெளிவான படங்களுக்கு) மற்றும் **resizeMode** (பட் எவ்வாறு அதன் பெட்டியில் பொருந்தায்) விளங்குவது Android மற்றும் iOS இன் பல்வேறு திரை அடர்த்திகளில் நன்றாக இருக்கும் படங்களுக்கு முக்கியமாகும்।n மிக முக்கியமாக, **பட செயல்திறன் மேம்பாட்டைப் புரிந்துகொள்வது** மதிப்புவாய் உள்ளது கரணம் **படங்கள் நினைவகம் சிக்கல்கள் மற்றும் jank இன் பொதுவான மூலம்** (குறிப்பாக பட்டியல்களில்): பொருத்தமாக அளவிடப்பட்ட படங்களைப் பயன்படுத்துவது (பெரிய படங்களை சிறிய கാட்சிகளில் ஏற்றாமல், இது நினைவகம் மற்றும் bandwidth விரயாவாக்குகிறது), **FastImage** ஐப் பயன்படுத்துவது சிறந்த தொலைதூர-பட செயல்திறனுக்கு மற்றும் **caching** (எனவே படங்கள் மீண்டும் பதிவிறக்கம் செய்யப்படாது மற்றும் பட்டியல்கள் மென்மையாக உருளும் — பட-பளுவான பட்டியல்களுக்கான இயல்பான Image-க்கு விரும்பத்தக்க மேம்பாடு), திறமையான வடிவமைப்பைப் பயன்படுத்துவது (WebP), மற்றும் placeholder உடன் lazy-loading. இந்த மேம்பாடுகள் முக்கியமாகும் கரணம் பட-பளுவான பயன்பாடுகள் (பொதுவான — feeds, galleries, profiles) படங்கள் நன்றாக கையாளப்படாவிட்டால் உண்மையான செயல்திறன் சிக்கல்களைக் சந்திக்க முடியும்। பெரும்பாலான பயன்பாடுகள் படங்களைக் காட்டுவதால் மற்றும் அவற்றைக் கையாளுவது நன்றாக (சரியான ஏற்றல் மற்றும் பரிமாணங்கள், தெளிவுத்திறன் மாறுபாடுகள், குறிப்பாக caching மற்றும் பொருத்தமான அளவிடுதல் உடன் செயல்திறன் மேம்பாடு) UX (தெளிவான, மென்மையாக-ஏற்றும் படங்கள்) மற்றும் செயல்திறன் (நினைவகம் சிக்கல்கள் மற்றும் jank தவிர்க்கவும்) இரண்டையும் பாதிக்கிறது, React Native இல் படங்கள் மற்றும் சொத்துக்களைப் புரிந்துகொள்வது மதிப்பும், நடைமுறையாகப் பொருத்தமான ஞ்ஞாnam — படங்களைக் காட்டுவதற்கான பொதுவான தேவைக்கு முக்கியமான, ஏற்றல், தெளிவுத்திறன், மற்றும் குறிப்பாக செயல்திறன் மேம்பாடு (caching, அளவிடுதல்) புரிந்துகொள்வது மென்மையான, பளபளப்பான படங்கள் மற்றும் சொத்து-பளுவான பயன்பாடுகளைக் கட்டுவதற்கு முக்கியமாக உள்ளது।