تكرار السؤال: …
الإجابة المختصرة
نظام iOS يستخدم خصائص shadowColor و shadowOffset و shadowOpacity و shadowRadius، بينما يستخدم أندرويد خاصية واحدة مدمجة هي elevation ترتبط بارتفاع العنصر عن الخلفية.
الشرح
بسبب اختلاف محركات الرسم بين المنصتين، لا يفهم نظام أندرويد خصائص shadow* الخاصة بـ iOS، بينما يفهم خاصية elevation التي تعتمد على عمق Material Design. لإنشاء ظل متناسق عبر المنصتين، ندمج خصائص المنصتين معاً في كائن التنسيق، أو نلجأ إلى مكتبات متطورة مثل react-native-drop-shadow لتوليد ظلال متطابقة بصرياً.
مثال بالكود
const styles = StyleSheet.create({
cardShadow: {
backgroundColor: '#fff',
// إعدادات الظل لنظام iOS:
shadowColor: '#000',
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.15,
shadowRadius: 8,
// إعدادات الظل لنظام Android:
elevation: 5,
}
});أخطاء شائعة
- تطبيق خاصية elevation في أندرويد على عنصر ليس له backgroundColor صريح، مما يمنع ظهور الظل أو يشوه حوافه.