كيف أتعامل مع اتجاه النص العربي في تطبيقات React Native

كنت قد أمضيت ثلاثة أسابيع في بناء تطبيق تواصل ليمو - وهو تطبيق لحجز خدمة سيارات فاخرة في أبو ظبي - عندما أرسل العميل نسخة الاختبار مع سطر واحد جعل معدتي تهتز: "النص العربي يبدو تالفًا ولكن لا يمكنني تفسير السبب". اتضح أن محاذاة النص العربي في React Native ليست مجرد إضافة سحر "RTL". إنه عام 2026، وما زلت أواجه نفس الأخطاء الغريبة عند دمج دعم الكتابة من اليمين إلى اليسار. إليك كيفية إصلاحها.

إعداد دعم RTL الأساسي في React Native

أول شيء أفعله: قلب I18nManager الخاص بـ React Native. هذا يبدل اتجاه التصميم العام على النحو التالي:

javascript

import { I18nManager } from 'react-native';  
I18nManager.allowRTL(true);  
I18nManager.forceRTL(true);

معظم التطبيقات تقرن هذا بـ react-native-localize لاكتشاف لغة النظام. لكنني دائمًا ما أفرض RTL لمستخدمي اللغة العربية بغض النظر عن إعدادات الجهاز - غالبًا ما يحتفظ مستخدمو الخليج بهواتف إنجليزية ولكنهم يتوقعون واجهة مستخدم عربية عندما يقومون بتبديل لغة التطبيق.

لترجمة النصوص، أستخدم next-intl بتنسيق رسائل ICU. إنه صلب للتعامل مع حالات جمع الأسماء وحالات الجنس التي نادرًا ما يفكر فيها مطورو اللغة الإنجليزية. (مثال: كان لدى تواصل ليمو 12 سلسلة تنسيق تاريخ مختلفة للمناطق الناطقة باللغة العربية.)

إصلاحات خاصة بالمكونات تحقق نتائج فعلية

تحتاج مكونات النص إلى اهتمام. لا يتعلق هذا بالاتجاه فحسب - بل إن الطباعة العربية تضع علامات الترقيم بمسافات مختلفة. قد يبدو نمط نص بسيط مثل:

javascript

const styles = StyleSheet.create({
  bodyText: {
    textAlign: I18nManager.isRTL ? 'right' : 'left',
    marginBottom: 8,
    // Fixes iOS spacing issues specific to Arabic
    paddingBottom: I18nManager.isRTL ? 2 : 0,
  },
});

TextInput يصبح غريبًا. النص البديل يتمحور بشكل خاطئ، والأيقونات تقفز إلى الجوانب الخاطئة، وتوقعات لوحة المفاتيح تومض. الحل؟ قم بتغليف كل إدخال في View مع flexDirection: 'row' صريح وعكس مواضع الأيقونات يدويًا. أستخدم react-native-vector-icons لـ SVGs مخصصة تنعكس مع resizeMode: I18nManager.isRTL ? 'scaleAspectFit' : 'center'.

في إحدى المرات، قامت TouchableOpacity على شاشة RTL بمحاذاة عناصرها التابعة بشكل مثالي ... حتى أضفت Pressable بالداخل. استغرق الأمر ساعتين من تصحيح الأخطاء الغاضب لإدراك أنني بحاجة إلى pointerEvents="auto" على Pressable. لن يحدث هذا مرة أخرى أبدًا.

استراتيجيات التصميم التي تصمد أمام ضمان الجودة

Flexbox يعمل بشكل مختلف في RTL. تبقى خصائص اليسار / اليمين مشفرة ما لم تقم بتجريدها. أتبادل القيم المشفرة بمتغيرات:

javascript

const paddingStart = I18nManager.isRTL ? 'paddingRight' : 'paddingLeft';  
const borderRadius = I18nManager.isRTL ? { borderBottomEndRadius: 8 } : {};

أو استخدم مصفوفات التحويل للتخطيطات المعقدة. على سبيل المثال، قلب مكون بطاقة في تطبيق التعرّف على النباتات بالذكاء الاصطناعي الخاص بـ Greeny Corner:

javascript

transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }]

اختبار هذا يدويًا أمر مؤلم. لقد قمت ببناء شاشة اختبار مع عينات من عقد النص وأيقونات الاتجاه. عادةً ما يكتشف ضمان الجودة في دبي شيئين: الصور المعكوسة المفقودة وتمييز تحديد النص غير الصحيح الذي ينزف خارج الخطوط.

الاختبار مع مستخدمين عرب حقيقيين

يمكنك محاكاة RTL في Flipper، لكن المستخدمين الحقيقيين يجدون الحالات الشاذة بشكل أسرع. بالنسبة لتطبيق بيع بالتجزئة في الرياض في العام الماضي، اعتقدنا أننا غطينا كل شيء حتى فتح أحد المختبرين شاشة عربة التسوق وقال: "يجب أن يأتي رقم '3 أيام' بعد كلمة 'أيام' وليس قبلها." تتعامل اللغة العربية مع الأرقام بشكل مختلف بالنسبة لعبارات الوقت.

نصيحة لتصحيح الأخطاء: أضف مبدل لغة إلى كل تطبيق أقوم ببنائه. يتيح لأي شخص تبديل اللغات بسرعة دون إعادة ضبط هاتفه على إعدادات المصنع. إنه في مستودع GitHub هذا إذا كنت تريد المنطق الأساسي.

الأسئلة الشائعة

هل Expo مدعوم لنص RTL في React Native؟

نعم - يعالج Expo SDK 54+ RTL بشكل أفضل بعد إصلاح مشكلة قطع نص Modal في عام 2025. لكن تحقق من ملحقات المجتمع الخاصة بهم - لا تزال بعض حزم الجهات الخارجية تخرّب التخطيط العربي.

لماذا يبدو مكون النص الخاص بي غير متناسق في اللغة العربية؟

ربما مقاييس الخط. لا تتعامل جميع خطوط Google مع التباعد العربي بشكل صحيح. جرب @fontsource/tajawal بدلاً من خطوط النظام - فهو مُحسَّن للجوّال وله 9 أوزان.

كيف يمكنني تنسيق التواريخ باللغتين العربية والإنجليزية؟

استخدم new Intl.DateTimeFormat() مع رمز اللغة. بالنسبة لأسواق الخليج ، أستخدم افتراضيًا ar-sa (العربية السعودية) و en-ae (الإنجليزية الإماراتية). يوضح دليل React Native Performance أمثلة التعليمات البرمجية الدقيقة.

هل تنعكس مكتبات الأيقونات تلقائيًا في RTL؟

ليس ما لم تخبرهم بذلك. يتطلب react-native-vector-icons انعكاسًا صريحًا. إليك حيلتي للأيقونات: قم بتحميل SVGs معكوسة عندما يكون RTL نشطًا ، أو استخدم transform: scaleX (-1) على الأيقونات الفردية.

إذا كنت تقوم ببناء تطبيقات ثنائية اللغة وترغب في تفادي هذه الأخطاء ، فأنا أساعد الشركات الناشئة في الإمارات العربية المتحدة على هيكلة تطبيقات React Native الخاصة بها من أجل قابلية التوسع متعددة اللغات - احجز استشارة مجانية وسنستعرض حالتك المحددة. أوه ، نعم: أقوم بشحن الإصدارات مع مبدل اللغة التجريبي افتراضيًا الآن. الألم أرخص في التطوير منه في الإنتاج.