StyleSheet — CSS dan farqlari, stillarni birlashtirish

~12 daq · React Native · Stil va layout

Muammodan boshlaylik

Vebdan kelgan dasturchi odatdagidek yozadi:

<View style={{ 'background-color': 'red', margin: '10px', display: 'grid' }} />

Hech biri ishlamaydi. React Native da stillar CSS ga o'xshaydi, lekin u CSS emas: fayllar yo'q, selektorlar yo'q, kaskad yo'q, birliklar boshqacha, ba'zi xususiyatlar umuman yo'q. Bu darsda farqlarni tartibga solamiz.

Asosiy qoidalar

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  karta: {
    backgroundColor: '#ffffff',     // camelCase
    padding: 16,                    // birliksiz raqam
    borderRadius: 12,
    marginBottom: 12,
  },
  sarlavha: {
    fontSize: 18,
    fontWeight: '700',              // matn sifatida
    color: '#0f172a',
  },
});

<View style={styles.karta}>
  <Text style={styles.sarlavha}>Salom</Text>
</View>

Birliklar

Raqamlar — density-independent pixels (dp/pt): ekran zichligidan mustaqil birlik. 16 — har qanday telefonda taxminan bir xil jismoniy o'lcham. Foizlar ham bor: width: '50%'.

px, em, rem, vh, vw — yo'q. Ekran o'lchamlari — useWindowDimensions (15-dars).

CSS dan asosiy farqlar

1. Kaskad va meros yo'q. Har bir element faqat o'ziga berilgan stilni oladi. Yagona istisno — Text ichidagi Text (6-dars).

2. Selektorlar yo'q. :hover, :first-child, .karta > p yo'q. Holat — JavaScript orqali (pressed, indeks).

3. Flexbox — yagona layout tizimi. display: grid, float, inline-block yo'q. display faqat 'flex' yoki 'none'.

4. Flexbox standartlari boshqacha. flexDirection standart — column (vebda row). 14-darsda batafsil.

5. Yo'q yoki cheklangan xususiyatlar:

• box-shadow — Android da cheklangan (16-dars)
• border-style faqat solid, dotted, dashed
• Gradient — expo-linear-gradient kutubxonasi orqali

Stillarni birlashtirish

<View style={[styles.karta, styles.tanlangan]} />

Massiv — chapdan o'ngga, keyingisi ustun. Shartli stil:

<View style={[styles.karta, tanlangan && styles.tanlangan, { opacity: faol ? 1 : 0.5 }]} />

false, null, undefined — e'tiborsiz qoldiriladi. Shuning uchun shart && stil naqshi qulay.

Komponentga stil uzatish

import { StyleProp, ViewStyle } from 'react-native';

type Props = { style?: StyleProp<ViewStyle>; children: React.ReactNode };

export function Karta({ style, children }: Props) {
  return <View style={[styles.karta, style]}>{children}</View>;
}

// Ishlatish — standart stilni qisman o'zgartirish
<Karta style={{ marginBottom: 0 }}>...</Karta>

style oxirida — tashqaridan berilgan stil ustun bo'lsin.

Inline stil yoki StyleSheet?

<View style={{ padding: 16 }} />                // inline
<View style={styles.karta} />                    // StyleSheet

Ikkalasi ham ishlaydi. StyleSheet.create:

• Kod tartibli, stillar bir joyda
• TypeScript noto'g'ri xususiyatni darhol ko'rsatadi
• Har render da yangi ob'ekt yaratilmaydi

Qoida: o'zgarmas stillar — StyleSheet, dinamik qiymatlar (holat, props ga bog'liq) — inline yoki massivda.

Ranglar va dizayn tizimi

Ranglarni har joyda qaytadan yozmang:

// constants/theme.ts
export const ranglar = {
  asosiy: '#0284c7',
  asosiyOch: '#e0f2fe',
  matn: '#0f172a',
  ikkinchiMatn: '#64748b',
  chegara: '#e2e8f0',
  fon: '#f8fafc',
  xato: '#dc2626',
  muvaffaqiyat: '#16a34a',
} as const;

export const bo_shliq = { xs: 4, sm: 8, md: 16, lg: 24, xl: 32 } as const;
export const radius = { sm: 8, md: 12, lg: 20, toliq: 999 } as const;

import { ranglar, bo_shliq, radius } from '@/constants/theme';

const styles = StyleSheet.create({
  karta: { backgroundColor: 'white', padding: bo_shliq.md, borderRadius: radius.md, borderColor: ranglar.chegara },
});

Brend rangi o'zgarsa — bitta faylni o'zgartirasiz. Qorong'i rejimga o'tish ham shu asosda quriladi (17-dars).

Tailwind uslubi: NativeWind

Tailwind ni yaxshi ko'rsangiz — NativeWind kutubxonasi:

<View className="bg-white p-4 rounded-xl mb-3">
  <Text className="text-lg font-bold text-slate-900">Salom</Text>
</View>

Ichkarida xuddi shu StyleSheet ga aylanadi. Kurs davomida biz StyleSheet bilan ishlaymiz — u asosiy va hamma joyda ishlaydi; NativeWind — keyin qo'shish mumkin bo'lgan ixtiyoriy qulaylik.

Nima uchun shunday?

Nima uchun React Native CSS ning kaskad va selektorlarini olib tashlagan?

Chunki katta loyihalarda kaskad — xatolarning asosiy manbai: bitta global stil o'zgarishi kutilmagan joylarni buzadi, !important urushlari boshlanadi. React Native jamoasi "stil — komponentning o'z xususiyati" degan yondashuvni tanladi: har bir stil aniq bir elementga, JavaScript orqali beriladi. Natija — stil qayerdan kelgani doim aniq, komponentlar bir-biriga ta'sir qilmaydi. Bu g'oya keyinchalik vebdagi CSS-in-JS kutubxonalariga ham ilhom berdi.

Xulosa

Eslab qoling:

• StyleSheet.create({...}) — camelCase, birliksiz raqamlar, foizlar mumkin
• Kaskad, meros (Text dan tashqari) va selektorlar yo'q
• Layout — faqat Flexbox; flexDirection standart — column
• style={[a, shart && b, { ... }]} — birlashtirish, keyingisi ustun
• StyleProp<ViewStyle> — komponentga tashqi stil
• Ranglar va bo'shliqlar — constants/theme.ts da
• NativeWind — Tailwind uslubini xohlasangiz

Keyingi dars

14-dars: Flexbox mobil ekranda — column standart, flex: 1