Text: یہ کیا ہے، متن کی نمائش اور React Native

React Native میں Text کیا ہے

Text متن کے مواد کو ظاہر کرنے کے لیے ایک React Native جزو ہے۔ ویب ڈویلپمنٹ کے برعکس، جہاں متن کے لیے بہت سے معنوی ٹیگز ہوتے ہیں، React Native میں تمام متن کے عناصر Text کے ذریعے بنائے جاتے ہیں۔ یہ جزو سادہ متن اور گھریلو Text اور اسٹائل کردہ ٹکڑوں کے ساتھ پیچیدہ ڈھانچے دونوں کو ظاہر کر سکتا ہے۔

Text خود بخود لائن ریپنگ کو سنبھالتا ہے، فونٹ فیملی، سائز، رنگ اور سیدھ کا انتظام کرتا ہے۔ یہ جزو چھونے کے واقعات (onPress) کو سپورٹ کرتا ہے، جو اضافی ریپرز کے بغیر کلک کے قابل لنکس بنانے کی اجازت دیتا ہے۔ ایک اہم حد: Text کو براہ راست View کے اندر گھریلو نہیں کیا جا سکتا — صرف دوسرے Text اجزاء کے اندر یا براہ راست اولاد کے طور پر۔

React Native Nested Text, 2024 کے مطابق، گھریلو Text اجزاء والدین سے اسٹائل وراثت میں لیتے ہیں۔ یہ اوپری سطح پر ایک بنیادی اسٹائل مقرر کرنے اور مخصوص ٹکڑوں کے لیے انفرادی خصوصیات کو اوور رائڈ کرنے کی اجازت دیتا ہے — ویب پر span کے CSS کے ساتھ کام کرنے کے مشابہ۔

Text جزو کی خصوصیات اور API

Text جزو نمائش، رویے اور رسائی کو کنٹرول کرنے کے لیے props کا ایک سیٹ فراہم کرتا ہے۔ اہم زمرے: اسٹائل props (فونٹ، سائز، رنگ، سیدھ)، نمائش props (numberOfLines, lineBreakMode) اور تعاملی props (onPress, onLongPress)۔

متن کی نمائش کے Props

numberOfLines ظاہر ہونے والی لائنوں کی تعداد کو محدود کرتا ہے، آخر میں بیضوی نشان شامل کرتا ہے۔ ellipsizeMode بیضوی نشان کی پوزیشن کو کنٹرول کرتا ہے (head, middle, tail, clip)۔ adjustsFontSizeToFit مقررہ حدود میں متن فٹ کرنے کے لیے خود بخود فونٹ سائز کم کرتا ہے۔ lineBreakMode numberOfLines سے آگے متن کو کاٹنے کا طریقہ طے کرتا ہے۔

تعاملی Props

Text چھونے کو سنبھالنے کے لیے onPress اور onLongPress کو سپورٹ کرتا ہے۔ یہ TouchableOpacity استعمال کیے بغیر متن کے لنکس بنانے کی اجازت دیتا ہے۔ onTextLayout رینڈرنگ کے بعد متن کی ترتیب کے بارے میں معلومات لوٹاتا ہے — اینیمیشنز اور پوزیشننگ کے لیے مفید۔

پلیٹ فارم سے مخصوص Props

iOS پر، disabled (متن کو غیر فعال کرتا ہے)، selectable (انتخاب کو فعال کرتا ہے)، dataDetectorTypes (لنکس، فونز، پتوں کا خودکار پتہ لگانا) دستیاب ہیں۔ Android پر، selectable (textSelectable کے ذریعے) اور includeFontPadding (اضافی پیڈنگ ہٹاتا ہے) دستیاب ہیں۔

Text اور HTML کے p اور span عناصر کے درمیان فرق

اگرچہ Text بصری طور پر HTML ٹیگز p اور span سے مشابہ ہے، لیکن تعمیراتی فرق اہم ہیں۔ React Native میں معنوی متن کے عناصر کے ساتھ DOM ماڈل نہیں ہے — تمام متن کے نوڈز مختلف props کے ساتھ ایک ہی Text جزو کے ذریعے سنبھالے جاتے ہیں۔

بنیادی فرق Text گھریلو پن کے ذریعے اسٹائل کی وراثت ہے۔ اگر بیرونی Text میں fontSize: 18 اور color: blue ہے، تو تمام گھریلو Text اجزاء یہ اسٹائل وراثت میں لیتے ہیں۔ کسی بھی prop کو اندرونی 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 تک نہیں۔ پوری ایپلیکیشن کے لیے فونٹ مقرر کرنے کے لیے، Text جزو کے defaultProps یا کسٹم ریپر جزو کا استعمال کیا جاتا ہے۔

<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 صرف اپنے اسٹائل وراثت میں لیتا ہے۔ یہ HTML میں گھریلو span کے کام کرنے کا عین مشابہ ہے۔

Text کے ساتھ عملی مثالیں

React Native میں Text کے دو عام استعمال کے معاملات دیکھتے ہیں: گھریلو پن کے ساتھ متن کی فارمیٹنگ اور لائن کی حد کے ساتھ کلک کے قابل جزو بنانا۔

مثال 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 کے اندر، لنک کے لیے onPress والا ایک اور Text گھریلو ہے۔ یہ پیٹرن نیوز فیڈز، بلاگز اور تبصروں کے لیے استعمال ہوتا ہے۔

مثال 2: لائن کی حد کے ساتھ متن

بیضوی نشان کے ساتھ متن کا پیش منظر ظاہر کرنے کے لیے numberOfLines استعمال ہوتا ہے۔ یہ پروڈکٹ کارڈز اور آرٹیکل کی فہرستوں کے لیے ایک معیاری پیٹرن ہے۔

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

numberOfLines = 2 خصوصیت متن کو دو لائنوں تک محدود کرتی ہے۔ اگر متن لمبا ہے، تو React Native خود بخود دوسری لائن کے آخر میں بیضوی نشان شامل کرتا ہے۔ ellipsizeMode: 'tail' پیرامیٹر مخصوص کرتا ہے کہ بیضوی نشان آخر میں ہونا چاہیے (head، middle اور clip بھی دستیاب ہیں)۔