دليل React Native للعربية (3): الخطوط ومشاكل المحاذاة في iOS و Android

الخطوط العربية

اختيار خط مثل “Cairo” أو “Tajawal” يرفع مستوى تطبيقك فوراً.

إضافة الخطوط

1. أضف ملفات .ttf في مجلد assets/fonts.
2. أنشئ ملف react-native.config.js:

   module.exports = {
     assets: ['./assets/fonts/'],
   };

3. نفذ الأمر: npx react-native-asset.

مشكلة النص المقصوص (Clipping)

في Android، أحياناً يظهر النص العربي مقصوصاً من الأعلى. الحل هو ضبط includeFontPadding:

text: {
  fontFamily: 'Cairo-Bold',
  includeFontPadding: false, // حل سحري للأندرويد
  textAlignVertical: 'center',
}

محاذاة النص (Text Align)

في النصوص متعددة الأسطر، استخدم textAlign: 'left' (نعم، left) للنصوص الإنجليزية، و textAlign: 'right' للعربية. أفضل ممارسة هي إنشاء مكون AppText مخصص يتعامل مع هذا تلقائياً بناءً على اللغة الحالية.