View va Text — div va p o'rnida nima bor

~12 daq · React Native · Asosiy komponentlar

Muammodan boshlaylik

React da yozgan komponentingizni React Native ga ko'chirmoqchisiz:

<div className="karta">
  <h2>Aziz Karimov</h2>
  <p>Frontend dasturchi</p>
  <span>Toshkent</span>
</div>

Bu ishlamaydi — React Native da div, h2, p, span yo'q. HTML yo'q. Buning o'rniga ikki asosiy "g'isht" bor: View va Text. Ekrandagi deyarli hamma narsa shu ikkisidan quriladi.

View — konteyner

View — div ning o'rni: boshqa elementlarni o'raydi, joylashtiradi, fon va chegara beradi.

import { View, Text, StyleSheet } from 'react-native';

export default function Karta() {
  return (
    <View style={styles.karta}>
      <Text style={styles.ism}>Aziz Karimov</Text>
      <Text style={styles.kasb}>Frontend dasturchi</Text>
      <Text style={styles.shahar}>📍 Toshkent</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  karta: {
    backgroundColor: 'white',
    padding: 16,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: '#e2e8f0',
    margin: 16,
  },
  ism: { fontSize: 20, fontWeight: '700' },
  kasb: { fontSize: 14, color: '#475569', marginTop: 4 },
  shahar: { fontSize: 13, color: '#94a3b8', marginTop: 8 },
});

HTML dagi semantik teglar (h1, p, section, header) yo'q. Sarlavha — shunchaki katta shriftli Text. Ma'no — komponent nomlari va accessibility xususiyatlari orqali (pastda).

Text — barcha matnlar uchun

Qoida (3-dars): har qanday matn <Text> ichida.

<View>
  <Text>Narx: {narx} so'm</Text>       {/* ✅ */}
  {narx} so'm                          {/* ❌ xato */}
</View>

Ichma-ich Text — matn ichida stil

<Text style={{ fontSize: 16 }}>
  Jami: <Text style={{ fontWeight: '700', color: '#16a34a' }}>250 000 so'm</Text>
</Text>

Ichki Text — HTML dagi span kabi: bitta qator ichida alohida stil. Tashqi Text ning stilini meros oladi (shrift o'lchami ichkisiga ham o'tadi).

[!WARNING] Meros faqat Text ichidagi Text ga ishlaydi. View ning stili ichidagi Text ga o'tmaydi: <View style={{ color: 'red' }}><Text>...</Text></View> — matn qizil bo'lmaydi. Vebdan farqli, React Native da "global CSS" yo'q — har bir Text o'z stilini oladi.

Foydali xususiyatlar

<Text numberOfLines={2} ellipsizeMode="tail">
  Juda uzun mahsulot tavsifi, ikki qatordan oshsa oxiri uch nuqta bilan qisqartiriladi...
</Text>

<Text selectable>Bu matnni nusxalash mumkin: +998 90 111 22 33</Text>

<Text onPress={() => console.log('bosildi')}>Bosiladigan matn</Text>

Shriftlar

Standart — tizim shrifti (Android: Roboto, iOS: San Francisco). Bu yaxshi tanlov: foydalanuvchiga tanish, tez.

fontWeight — matn sifatida: '400', '600', '700', 'bold'.

O'z shriftingiz (expo-font va @expo-google-fonts/*):

npx expo install expo-font @expo-google-fonts/inter

// app/_layout.tsx
import { useFonts, Inter_400Regular, Inter_700Bold } from '@expo-google-fonts/inter';
import { Stack } from 'expo-router';

export default function RootLayout() {
  const [yuklandi] = useFonts({ Inter_400Regular, Inter_700Bold });
  if (!yuklandi) return null;
  return <Stack />;
}

<Text style={{ fontFamily: 'Inter_700Bold' }}>Sarlavha</Text>

Maxsus shriftlarda fontWeight o'rniga — har bir qalinlik alohida fontFamily.

Accessibility — ko'rish qobiliyati cheklanganlar uchun

Ekran o'quvchilari (Android TalkBack, iOS VoiceOver) ilovani ovoz bilan o'qiydi:

<Text accessibilityRole="header" style={styles.sarlavha}>Buyurtmalarim</Text>

<View accessible accessibilityLabel="Aziz Karimov, Frontend dasturchi, Toshkent">
  <Text>Aziz Karimov</Text>
  <Text>Frontend dasturchi</Text>
</View>

• accessibilityRole="header" — h1 ning o'rni
• accessible — bir nechta elementni bitta guruh sifatida o'qish
• accessibilityLabel — ekran o'quvchisi uchun matn

Foydalanuvchi tizimda shrift o'lchamini kattalashtirsa — Text ham kattalashadi. Dizaynni shunga tayyorlang (numberOfLines, flexWrap).

Boshqa konteynerlar

Nima uchun shunday?

Nima uchun React Native da HTML teglari o'rniga faqat bir nechta umumiy komponent bor?

Chunki React Native hujjat emas, interfeys chizadi. HTML teglari hujjat tuzilmasini ifodalash uchun yaratilgan: sarlavha, paragraf, ro'yxat, jadval. Mobil platformalarda esa bunday tushunchalar yo'q — faqat "konteyner" (UIView) va "matn" (UILabel) bor. React Native ularni aynan shunday aks ettiradi. Semantika esa accessibility xususiyatlari orqali beriladi — bu native platformalardagi yondashuvning o'zi.

Xulosa

Eslab qoling:

• View — konteyner (div), Text — matn (p, span, h1)
• Har qanday matn — Text ichida
• Ichma-ich Text — qator ichida stil; stil faqat Text dan Text ga meros
• numberOfLines, selectable, onPress — Text xususiyatlari
• fontWeight — matn: '700'; maxsus shriftlar — expo-font
• accessibilityRole, accessibilityLabel — ekran o'quvchilari uchun

Keyingi dars

7-dars: Image va expo-image — mahalliy va tarmoqdagi rasmlar