تكرار السؤال: …
الإجابة المختصرة
هي قيام النظام برسم نفس البكسل على الشاشة عدة مرات في نفس الإطار نتيجة لتراكم خلفيات ملونة غير ضرورية في حاويات <View> المتداخلة، مما يهدر طاقة كرت الشاشة (GPU).
الشرح
يمكن تفعيل خيار "Show GPU Overdraw" في خيارات مطور أندرويد. العناصر التي تظهر باللون الأزرق رسمت مرة واحدة (ممتاز)، بينما اللون الأخضر مرتان، والوردي والأحمر 3 إلى 4 مرات (سيء). لحل المشكلة، نقوم بإزالة خصائص backgroundColor من الحاويات الداخلية والاعتماد على خلفية الحاوية الرئيسية فقط.
مثال بالكود
// نمط سيء يسبب Overdraw عالي:
// <View style={{ backgroundColor: '#fff' }}>
// <View style={{ backgroundColor: '#fff' }}>
// <View style={{ backgroundColor: '#fff' }}><Text>نص</Text></View>
// </View>
// </View>
// نمط سليم ومحسن: خلفية واحدة فقط
<View style={{ backgroundColor: '#fff' }}>
<View>
<View><Text>نص</Text></View>
</View>
</View>أخطاء شائعة
- وضع لون خلفية صريح لكل طبقة من طبقات المكونات الفرعية داخل البطاقات والقوائم.