React Native UI Design RTL

دليل React Native للعربية (2): تصميم الواجهات المرنة (Flexbox & RTL)

👤 ياسر نجيب
•
📅
•
⏱️ 1 min read

القاعدة الذهبية: 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 }] }}
/>