تكرار السؤال: …
الإجابة المختصرة
يقوم Image بتحميل وعرض الصور المحلية والشبكية؛ لكنه يعاني من ضعف إمكانيات الكاش على أجهزة أندرويد وتكرار إعادة التنزيل والوميض مقارنة بمكتبات متخصصة مثل expo-image.
الشرح
يتطلب مكون Image تمرير كائن { uri: "..." } للصور الشبكية و require("./img.png") للصور المحلية. الكاش الافتراضي لنظام التشغيل غير كافٍ للتطبيقات التي تعتمد على الصور بكثافة (مثل منصات التواصل). لذلك ينصح المجتمع باستخدام expo-image أو react-native-fast-image التي تدعم صيغ WebP و AVIF وتوفر كاش قوي على القرص وإظهار بلور مؤقت (Blurhash).
مثال بالكود
import { Image, StyleSheet } from 'react-native';
function ProfileAvatar({ avatarUrl }: { avatarUrl: string }) {
return (
<Image
source={{ uri: avatarUrl }}
style={styles.avatar}
resizeMode="cover"
defaultSource={require('./assets/placeholder.png')} // لـ iOS أثناء التحميل
/>
);
}أخطاء شائعة
- نسيان تحديد عرض (width) وارتفاع (height) صريحين للصور الشبكية، مما يمنع ظهورها نهائياً.