تكرار السؤال: …
الإجابة المختصرة
العناصر ذات التنسيق relative تظل ضمن التدفق الطبيعي للـ Flexbox وتتحرك بالنسبة لموضعها الأصلي، بينما absolute تُستثنى تماماً من تدفق المحاذاة وتثبت بالنسبة لأقرب حاوية أب.
الشرح
في React Native، الوضع الافتراضي لكافة العناصر هو relative. عند تعيين position: "absolute"، لا تحتاج الحاوية الأب لوضع relative صراحة (كالمتصفح)، بل يعتبر العنصر الأب المباشر هو الإطار المرجعي تلقائياً، وتستخدم قيم top و bottom و left/start و right/end لتحديد موقعه الدقيق.
مثال بالكود
// تثبيت شارة تنبيه (Badge) على زاوية أيقونة
const styles = StyleSheet.create({
iconContainer: {
width: 48,
height: 48,
},
badge: {
position: 'absolute',
top: -4,
right: -4,
backgroundColor: 'red',
borderRadius: 10,
width: 20,
height: 20,
justifyContent: 'center',
alignItems: 'center',
}
});أخطاء شائعة
- محاولة استخدام zIndex لعناصر absolute على أجهزة أندرويد دون مراعاة ترتيب تسلسل الأبناء في الشجرة الأصلية، مما قد يفشل ظهور العنصر في المقدمة.