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-এর দুটি সাধারণ ব্যবহারের ক্ষেত্রে দেখা যাক: নেস্টিংয়ের সাথে টেক্সট ফর্ম্যাটিং এবং লাইন সীমা সহ ক্লিকযোগ্য কম্পোনেন্ট তৈরি করা।

উদাহরণ ১: ফর্ম্যাটিং সহ নিউজ কার্ড

এই উদাহরণে, 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 নেস্টেড আছে। এই প্যাটার্নটি নিউজ ফিড, ব্লগ এবং মন্তব্যের জন্য ব্যবহৃত হয়।

উদাহরণ ২: লাইন সীমা সহ টেক্সট

উপবৃত্ত সহ টেক্সট প্রিভিউ প্রদর্শনের জন্য, numberOfLines ব্যবহার করা হয়। এটি প্রোডাক্ট কার্ড এবং আর্টিকেল তালিকার জন্য একটি স্ট্যান্ডার্ড প্যাটার্ন।

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

numberOfLines = 2 প্রপার্টি টেক্সটকে দুই লাইনে সীমাবদ্ধ করে। যদি টেক্সট লম্বা হয়, React Native স্বয়ংক্রিয়ভাবে দ্বিতীয় লাইনের শেষে উপবৃত্ত যোগ করে। ellipsizeMode: 'tail' প্যারামিটার নির্দিষ্ট করে যে উপবৃত্ত শেষে থাকবে (head, middle, এবং clipও উপলব্ধ)।