كيف تتعامل مع الصور والأصول في React Native؟

Question

Accepted Answer

تعرض تطبيقات React Native **الصور** (محلية وعن بعد) وتحزم **الأصول** (الخطوط، إلخ). فهم كيفية تحميل الصور بكفاءة، والتعامل مع دقة الشاشة المختلفة، وتحسين أداء الصور مهم لتجربة المستخدم الجيدة والأداء. ## تحميل الصور ```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`، والنقطة المهمة أن **الصور تحتاج أبعاد صريحة** في React Native (على عكس الويب، لا تتغير تلقائياً) — ضروري لعرض أي صورة. فهم **معالجة الدقة** (توفير متغيرات @2x/@3x بحيث يختار React Native الصورة المناسبة حسب كثافة الجهاز للحصول على صور واضحة عبر الشاشات) و**resizeMode** (كيفية توافق الصور مع صندوقها) مهم للصور التي تبدو جيدة على كثافات الشاشات المتنوعة في Android و iOS. الأهم من ذلك، فهم **تحسين أداء الصور** مهم لأن **الصور هي مصدر شائع لمشاكل الذاكرة والتأخر** (خاصة في القوائم): استخدام صور بأحجام مناسبة (عدم تحميل صور ضخمة في عروض صغيرة، مما يهدر الذاكرة وعرض النطاق الترددي)، استخدام **FastImage** لأداء أفضل للصور البعيدة و**التخزين المؤقت** (بحيث لا تُحمّل الصور مجدداً والقوائم تتمرر بسلاسة — تحسن كبير مقابل Image الافتراضية للقوائم الكثيفة بالصور)، استخدام صيغ فعالة (WebP)، والتحميل الكسول مع الصور النائبة. هذه التحسينات مهمة لأن التطبيقات الغنية بالصور (شائعة — الموجزات والمعارض والملفات الشخصية) قد تعاني من مشاكل أداء حقيقية إذا لم تُعالج الصور بشكل جيد. بما أن معظم التطبيقات تعرض الصور والتعامل معها بشكل جيد (التحميل والأبعاد الصحيحة، متغيرات الدقة، وخاصة تحسين الأداء مع التخزين المؤقت والحجم المناسب) يؤثر على تجربة المستخدم (صور واضحة وتحميل سلس) والأداء (تجنب مشاكل الذاكرة والتأخر)، فإن فهم الصور والأصول في React Native معرفة عملية وذات قيمة — مهمة للحاجة الشائعة لعرض الصور، حيث فهم التحميل والدقة وخاصة تحسين الأداء (التخزين المؤقت والحجم) هو المفتاح لبناء تطبيقات غنية بالصور سلسة ومصقولة.