React Native UI Design RTL
دليل React Native للعربية (2): تصميم الواجهات المرنة (Flexbox & RTL)
ياسر نجيب •
القاعدة الذهبية: Start و End
في عالم RTL، اليمين ليس دائماً يميناً.
- Left ↚ يصبح Start في LTR و End في RTL.
- Right ↚ يصبح End في LTR و Start في RTL.
أمثلة عملية
الهوامش (Margins & Paddings)
بدلاً من:
style: {
marginLeft: 20, // خطأ! سيبقى يساراً دائماً
}استخدم:
style: {
marginStart: 20, // صحيح! سيكون يميناً في العربي ويساراً في الإنجليزي
}المحاذاة (Alignment)
بدلاً من flexDirection: 'row-reverse'، اعتمد على السلوك الافتراضي لـ Flexbox في React Native. هو ذكي بما يكفي لقلب الاتجاه تلقائياً إذا كان I18nManager.isRTL مفعلاً.
container: {
flexDirection: 'row', // سيبدأ من اليمين تلقائياً في العربي
alignItems: 'center',
}التعامل مع الأيقونات
بعض الأيقونات تحتاج قلباً (مثل سهم الرجوع)، والبعض لا (مثل أيقونة الكاميرا). لقلب أيقونة:
<Icon
name="arrow-right"
style={{ transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }] }}
/>