تكرار السؤال: …
الإجابة المختصرة
في React Native لا توجد ملفات CSS تقليدية، وتكتب الخصائص بصيغة camelCase ككائنات JavaScript، وتدعم Flexbox فقط بدون Grid أو float، ويكون flexDirection الافتراضي column، وتكون كافة الأبعاد بلا وحدات (Density-independent Pixels).
الشرح
لا يتعامل محرك Yoga مع محددات الـ CSS (Selectors مثل .class أو #id) أو التوريث (Inheritance) التلقائي للتنسيقات فيما عدا النصوص المتداخلة داخل وسم <Text>. كافة الأبعاد تعتبر بوحدات dp (نظام النقطة المستقلة عن الكثافة)، ولا توجد وسوم مثل <div> بل يتم استخدام <View> و <Text> مع كائنات التنسيق الصريحة.
مثال بالكود
// مقارنة الصيغة:
// CSS: background-color: #fff; margin-top: 10px;
// React Native:
const styles = StyleSheet.create({
box: {
backgroundColor: '#ffffff',
marginTop: 10,
borderRadius: 8,
}
});أخطاء شائعة
- كتابة وحدات قياس مثل "px" أو "rem" أو "em" داخل التنسيقات الرقمية، مما يؤدي لخطأ فادح في التشغيل.