Text: ما هو، عرض النص و React Native

ما هو Text في React Native

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

يتولى Text تلقائياً معالجة التفاف النص، ويدير عائلة الخط والحجم واللون والمحاذاة. يدعم المكون أحداث اللمس (onPress)، مما يتيح إنشاء روابط قابلة للنقر بدون أغلفة إضافية. قيد مهم: لا يمكن تداخل Text مباشرة داخل View — فقط داخل مكونات Text أخرى أو كأبناء مباشرين.

وفقاً لـ React Native Nested Text, 2024، ترث مكونات Text المتداخلة الأنماط من الأصل. يتيح ذلك تعيين نمط أساسي في المستوى العلوي وتجاوز خصائص فردية لأجزاء محددة — على غرار عمل span مع CSS في الويب.

خصائص و API لمكون Text

يوفر مكون Text مجموعة من الخصائص للتحكم في العرض والسلوك وإمكانية الوصول. الفئات الرئيسية: خصائص النمط (الخط، الحجم، اللون، المحاذاة)، خصائص العرض (numberOfLines, lineBreakMode) والخصائص التفاعلية (onPress, onLongPress).

خصائص عرض النص

numberOfLines يحدد عدد الأسطر المعروضة، مع إضافة علامة حذف في النهاية. ellipsizeMode يتحكم في موضع علامة الحذف (head, middle, tail, clip). adjustsFontSizeToFit يقلل حجم الخط تلقائياً لتناسب النص ضمن الحدود المحددة. lineBreakMode يحدد كيفية قص النص بعد تجاوز numberOfLines.

الخصائص التفاعلية

يدعم Text onPress و onLongPress لمعالجة اللمسات. يتيح ذلك إنشاء روابط نصية بدون استخدام TouchableOpacity. onTextLayout يُرجع معلومات حول تخطيط النص بعد التقديم — مفيد للرسوم المتحركة وتحديد المواقع.

خصائص خاصة بالمنصة

على iOS، تتوفر disabled (تعطيل النص)، selectable (تمكين التحديد)، dataDetectorTypes (الكشف التلقائي عن الروابط والأرقام والعناوين). على Android، تتوفر selectable (عبر textSelectable) و includeFontPadding (إزالة الحشو الإضافي).

الاختلافات بين Text وعناصر p و span في HTML

على الرغم من أن Text يشبه بصرياً علامتي HTML p و span، إلا أن الاختلافات المعمارية كبيرة. يفتقر React Native إلى نموذج DOM مع عناصر نصية دلالية — تتم معالجة جميع عُقد النص من خلال مكون Text واحد بخصائص مختلفة.

الفرق الرئيسي هو وراثة الأنماط من خلال تداخل Text. إذا كان Text خارجي لديه fontSize: 18 و color: blue، فإن جميع مكونات Text المتداخلة ترث هذه الأنماط. يمكن تجاوز أي خاصية في Text الداخلي بتعيين قيمة محددة. هذا يوفر الكود ويجعل الهيكل أنظف.

تنسيق النص والخطوط

يدعم Text معظم خصائص CSS للطباعة: fontFamily, fontSize, fontWeight, fontStyle, color, letterSpacing, lineHeight, textAlign, textDecorationLine, textTransform. في React Native، يتم توصيل الخطوط على مستوى المنصة، وليس عبر @font-face.

استخدام الخطوط المخصصة

لاستخدام خطوط مخصصة، يجب إضافتها إلى مجلد assets/fonts وتحديدها في react-native.config.js. بعد إعادة بناء التطبيق، يصبح الخط متاحاً عبر fontFamily. لا يدعم React Native خطوط الويب (Google Fonts) مباشرة — يتطلب تنزيل ملفات .ttf أو .otf.

وراثة الأنماط والتتالي

تختلف آلية الوراثة في Text عن CSS. تنتقل الأنماط فقط من Text إلى Text متداخل، ولكن ليس من View إلى Text. لتعيين خط للتطبيق بالكامل، يتم استخدام defaultProps لمكون Text أو مكون غلاف مخصص.

<Text style={{ fontSize: 18, color: '#333' }}>
    This text is 18px and color #333
    <Text style={{ fontWeight: 'bold', color: '#007AFF' }}>
        bold and blue
    </Text>
    back to #333 color
</Text>

في هذا المثال، يحدد Text الخارجي fontSize: 18 و color: #333. Text الداخلي يرث fontSize (18)، لكنه يتجاوز fontWeight إلى bold و color إلى #007AFF. Text الخارجي يرث أنماطه فقط. هذا تماثل دقيق لكيفية عمل span المتداخل في HTML.

أمثلة عملية مع Text

دعونا نلقي نظرة على حالتين نموذجيتين لاستخدام Text في React Native: تنسيق النص مع التداخل وإنشاء مكون قابل للنقر مع حد للأسطر.

مثال 1: بطاقة خبر مع تنسيق

في هذا المثال، يُستخدم Text لعرض نص متعدد الأسطر مع عناصر مميزة: العنوان والتاريخ والمحتوى مع رابط.

const NewsCard = ({ title, date, content }) => (
    <View style={styles.card}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.date}>{date}</Text>
        <Text style={styles.content}>
            {content}
            {' ' }
            <Text
                style={styles.link}
                onPress={() => Linking.openURL(url)}
            >
                Read more
            </Text>
        </Text>
    </View>
);

تحتوي هذه البنية على ثلاثة مكونات Text مستقلة (العنوان، التاريخ، المحتوى)، لكل منها نمطه الخاص. داخل Text المحتوى، تم تداخل Text آخر مع onPress للرابط. يُستخدم هذا النمط لخلاصات الأخبار والمدونات والتعليقات.

مثال 2: نص مع حد للأسطر

لعرض معاينات النص مع علامة حذف، يُستخدم numberOfLines. هذا نمط قياسي لبطاقات المنتجات وقوائم المقالات.

<Text
    numberOfLines={2}
    ellipsizeMode="tail"
    style={styles.preview}
>
    {longDescription}
</Text>

الخاصية numberOfLines = 2 تحدد النص بسطرين. إذا كان النص أطول، يضيف React Native تلقائياً علامة حذف في نهاية السطر الثاني. تشير المعلمة ellipsizeMode: 'tail' إلى أن علامة الحذف يجب أن تكون في النهاية (head, middle, clip متوفرة أيضاً).