StyleSheet — bu nima, React Native-da stillar yaratish

StyleSheet nima?

StyleSheet — React Native-ning komponent stillarini aniqlash uchun o'rnatilgan API-si. Veb-ishlanmasidagi CSS-dan farqli o'laroq, RN stillarni tavsiflash uchun JavaScript obyektlaridan foydalanadi. StyleSheet.create — stillar bilan obyektni qabul qiladigan va raqamli identifikatorlar bilan obyekt qaytaradigan asosiy metod.

StyleSheet React Native yadrosining bir qismidir va qo'shimcha paketlarni o'rnatishni talab qilmaydi. Meta ma'lumotlariga ko'ra (2026), React Native-dagi loyihalarning 95% statik stillar uchun StyleSheet.create-dan foydalanadi. Alternativlar: styled-components, Emotion, NativeWind (RN uchun Tailwind) — lekin o'rnatilgan StyleSheet yadro uchun standart bo'lib qolmoqda.

Tarix va evolyutsiya

React Native-ning birinchi versiyalarida (2015) stillar faqat inline-obyektlar orqali aniqlangan. StyleSheet.create RN 0.4 da optimallashtirish sifatida paydo bo'ldi. Konsepsiya CSS-dan olingan: stillarni mantiqdan o'qiluvchanlik va unumdorlik uchun ajrating. Yillar davomida API kengaydi: absoluteFill, hairlineWidth, flatten qo'shildi.

StyleSheet.create vs inline-stillar

StyleSheet.create va inline-stillar o'rtasidagi farq unumdorlik uchun muhim ahamiyatga ega. Inline-stil — komponentning har bir renderida yaratiladigan oddiy JavaScript obyekti. StyleSheet.create — modul yuklanganda bir marta yaratiladigan va raqamli ID-ga aylantiriladigan obyekt.

Inline-stil uzatilganda, React Native har safar butun obyektni JavaScript-Native ko'prigi orqali yuboradi. Murakkab stillarga ega komponent uchun bu har bir renderda uzatiladigan o'nlab xususiyatlardir. StyleSheet.create faqat raqam identifikatorini uzatadi, ko'prik yukini kamaytiradi.

// StyleSheet.create — optimallashtirilgan yondashuv
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

// Inline style — har bir renderda yangi obyekt yaratadi
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

<Text style={styles.title}>Title</Text>

Inline qachon ishlatiladi: holatga bog'liq dinamik stillar uchun (pressed, selected, active). Statik stillar uchun har doim StyleSheet.create-dan foydalaning. Qoida: statika → create, dinamika → inline-funksiya.

StyleSheet orqali Flexbox joylashuvi

Flexbox — React Native-da yagona joylashuv mexanizmi (CSS Grid qo'llab-quvvatlanmaydi, float esa mavjud emas). StyleSheet.create flex-konteynerlar va ularning bola elementlarini tavsiflash uchun ishlatiladi. Asosiy xususiyatlar: flex (to'ldirish koeffitsienti), flexDirection (row | column), justifyContent, AlignItems.

Standartda React Native-da flexDirection column (CSS-da — row). Veb-ishlanmasidan o'tishda eslab qolish kerak bo'lgan birinchi narsa bu. Barcha View-lar standartda flex-konteynerlardir. Elementni markazlashtirish uchun AlignItems: 'center' + justifyContent: 'center' dan foydalaning.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
});

Muhim: React Native-da barcha o'lchamlar birliksiz beriladi (faqat raqam). Foizlar ishlaydi, lekin faqat ota-onaga nisbatan width va height uchun. margin va padding raqamlarni qabul qiladi. Moslashuvchanlik uchun foizlar o'rniga flex dan foydalaning — bu turli ekranlarda ishonchliroq.

StyleSheet API: create, flatten, hairlineWidth, absoluteFill

StyleSheet API create dan tashqari bir necha metodlarni o'z ichiga oladi. StyleSheet.flatten stillar massivini bitta obyektda birlashtiradi — kompozitsiya va stillarni uchinchi tomon komponentlariga uzatish uchun foydali. StyleSheet.hairlineWidth qurilmada minimal ko'rinadigan chiziq kengligini qaytaradi.

StyleSheet.absoluteFill — oldindan belgilangan stil { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }. Overlay qatlamlari, modal oynalar va to'liq ekranni qamrab oluvchi mutlaq joylashtirish uchun ishlatiladi. StyleSheet.absoluteFillObject — kengaytirish uchun obyekt shaklida xuddi shu narsa.

// flatten — stillarni birlashtirish
const base = StyleSheet.create({
  button: { padding: 12, borderRadius: 8 },
  primary: { backgroundColor: 'blue' },
});

const combined = StyleSheet.flatten([base.button, base.primary]);
// { padding: 12, borderRadius: 8, backgroundColor: 'blue' }

// hairlineWidth — minimal chiziq
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth ajratgichlar va chegaralar uchun foydalidir — ekran zichligidan qat'iy nazar har doim 1 fizik piksel ko'rinadi. Retina displeylarda bu 0.5 mantiqiy nuqta, oddiy ekranlarda — 1 nuqta. HairlineWidth-ni qat'iy belgilangan o'lchamga ega bo'lishi kerak bo'lgan elementlar uchun ishlatmang.

Dimensions API bilan moslashuvchan joylashuv

Dimensions API StyleSheet bilan birgalikda turli ekran o'lchamlariga moslashuvchan joylashuv uchun ishlatiladi. Dimensions.get('window') oynaning kengligi va balandligini qaytaradi. Ekran aylantirilganda reaktiv yangilanish uchun React Native-dan useWindowDimensions hook-idan foydalaning.

StyleSheet.create CSS-dagi kabi media so'rovlarini qo'llab-quvvatlamasa ham, siz create ichida Dimensions asosida qiymatlarni hisoblashingiz yoki funksiya orqali dinamik stillardan foydalanishingiz mumkin. Breakpoints uchun turli kenglik diapazonlari uchun alohida stillar yarating.

import { useWindowDimensions } from 'react-native';

const ResponsiveCard = () => {
  const { width } = useWindowDimensions();
  const isLarge = width > 768;

  return (
    <View style={[styles.card, isLarge && styles.cardLarge]}>
      <Text>Responsive card</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    width: '100%',
    padding: 16,
  },
  cardLarge: {
    width: '50%',
    alignSelf: 'center',
  },
});

useWindowDimensions ekran aylantirilganda va Split View bilan planshetlarda oyna o'lchami o'zgarganda avtomatik yangilanadi. SSR (React Native Web) uchun Dimensions.get komponent mount qilingandan keyin chaqirilishiga ishonch hosil qiling, server va mijoz o'rtasidagi nomuvofiqlikni oldini olish uchun.

Loyihada stillarni tashkil qilish

StyleSheet-ni tashkil qilish loyihada kodning barqarorligi va qayta ishlatilishiga ta'sir qiladi. Uch yondashuv: komponent ichidagi lokal stillar (styles.js komponent yonida), global stillar (ranglar, bo'shliqlar, tipografiya konstantalari bilan theme.js) va kompozitsiya orqali modulli stillar.

Tavsiya etilgan tuzilma: ranglar, o'lchamlar va tipografiya konstantalari bilan theme.js; har bir komponentning o'ziga xos stillari uchun uning yonida Component.styles.js; asosiy va o'ziga xos stillarni birlashtirish uchun StyleSheet.flatten. Katta loyihalar uchun tema generatsiyasi bilan Design System-dan foydalaning.

// theme.js — global konstantalar
export const colors = {
  primary: '#6200EE',
  background: '#FFFFFF',
  text: '#1C1B1F',
  surface: '#F5F5F5',
};

export const spacing = {
  xs: 4, sm: 8, md: 16, lg: 24, xl: 32,
};

export const typography = {
  h1: { fontSize: 24, fontWeight: 'bold', lineHeight: 32 },
  body: { fontSize: 16, lineHeight: 24 },
};

// Button.styles.js
import { colors, spacing, typography } from './theme';

export default StyleSheet.create({
  button: {
    backgroundColor: colors.primary,
    paddingVertical: spacing.sm,
    paddingHorizontal: spacing.lg,
    borderRadius: 8,
  },
  text: {
    ...typography.body,
    color: '#FFFFFF',
    textAlign: 'center',
  },
});

Modulli tashkil qilishning afzalliklari: ranglar va bo'shliqlar uchun yagona haqiqat manbai, refaktoringni soddalashtirish (primary-ni o'zgartirdingiz — barcha tugmalar yangilandi), flatten orqali stillarni qayta ishlatish, kodning o'qiluvchanligi va bashorat qilish qobiliyati. TypeScript loyihalari uchun declare module orqali temaga tiplar qo'shing.