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 घटक प्रदर्शन, व्यवहार और पहुँच को नियंत्रित करने के लिए प्रॉप्स का एक सेट प्रदान करता है। मुख्य श्रेणियाँ: शैली प्रॉप्स (फ़ॉन्ट, आकार, रंग, संरेखण), प्रदर्शन प्रॉप्स (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 और HTML के p और span तत्वों के बीच अंतर

हालाँकि 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 को नहीं। पूरे एप्लिकेशन के लिए फ़ॉन्ट सेट करने के लिए, 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 भी उपलब्ध हैं)।