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 مجموعه‌ای از props را برای مدیریت نمایش، رفتار و دسترسی‌پذیری ارائه می‌دهد. دسته‌بندی‌های کلیدی: propsهای استایلی (فونت، اندازه، رنگ، تراز)، propsهای نمایش (numberOfLines, lineBreakMode) و تعاملی (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 با عناصر متنی معنایی وجود ندارد — تمام گره‌های متنی از طریق یک کامپوننت واحد Text با propsهای مختلف مدیریت می‌شوند.

تفاوت کلیدی — ارث‌بری استایل‌ها از طریق تودرتوی 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. اگر نیاز به تنظیم فونت برای کل برنامه است، از defaultProps کامپوننت Text یا یک کامپوننت wrapper سفارشی استفاده می‌شود.

<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 را بررسی می‌کنیم: قالب‌بندی متن با تودرتو و ایجاد کامپوننت قابل کلیک با محدودیت خط.

مثال ۱: کارت خبری با قالب‌بندی

در این مثال، 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 برای لینک قرار گرفته است. چنین الگویی برای فیدهای خبری، وبلاگ‌ها و نظرات استفاده می‌شود.

مثال ۲: متن با محدودیت خط

برای نمایش پیش‌نمایش متن با سه نقطه از numberOfLines استفاده می‌شود. این الگوی استاندارد برای کارت‌های محصولات و مقالات در لیست‌ها است.

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

ویژگی numberOfLines = 2 متن را به دو خط محدود می‌کند. اگر متن طولانی‌تر باشد، React Native به طور خودکار سه نقطه در انتهای خط دوم اضافه می‌کند. پارامتر ellipsizeMode: 'tail' مشخص می‌کند که سه نقطه در انتها باشد (head, middle, clip نیز در دسترس هستند).