React Native Typography Fonts
دليل React Native للعربية (3): الخطوط ومشاكل المحاذاة في iOS و Android
ياسر نجيب •
الخطوط العربية
اختيار خط مثل “Cairo” أو “Tajawal” يرفع مستوى تطبيقك فوراً.
إضافة الخطوط
- أضف ملفات
.ttfفي مجلدassets/fonts. - أنشئ ملف
react-native.config.js:module.exports = { assets: ['./assets/fonts/'], }; - نفذ الأمر:
npx react-native-asset.
مشكلة النص المقصوص (Clipping)
في Android، أحياناً يظهر النص العربي مقصوصاً من الأعلى. الحل هو ضبط includeFontPadding:
text: {
fontFamily: 'Cairo-Bold',
includeFontPadding: false, // حل سحري للأندرويد
textAlignVertical: 'center',
}محاذاة النص (Text Align)
في النصوص متعددة الأسطر، استخدم textAlign: 'left' (نعم، left) للنصوص الإنجليزية، و textAlign: 'right' للعربية.
أفضل ممارسة هي إنشاء مكون AppText مخصص يتعامل مع هذا تلقائياً بناءً على اللغة الحالية.