StyleSheet — bu nədir, React Native-də stillərin yaradılması

StyleSheet nədir?

StyleSheet — React Native-in komponent stillərini təyin etmək üçün daxili API-si. Veb inkişafındakı CSS-dən fərqli olaraq, RN stilləri təsvir etmək üçün JavaScript obyektlərindən istifadə edir. StyleSheet.create — stillərlə obyekti qəbul edən və rəqəmsal identifikatorlarla obyekt qaytaran əsas metoddur.

StyleSheet React Native-in nüvəsinə daxildir və əlavə paketlərin quraşdırılmasını tələb etmir. Meta məlumatlarına görə (2026), React Native-də layihələrin 95%-i statik stillər üçün StyleSheet.create-dən istifadə edir. Alternativlər: styled-components, Emotion, NativeWind (RN üçün Tailwind) — lakin daxili StyleSheet nüvə üçün standart olaraq qalır.

Tarix və təkamül

React Native-in ilk versiyalarında (2015) stillər yalnız inline-obyektlər vasitəsilə təyin edilirdi. StyleSheet.create RN 0.4-də optimallaşdırma kimi ortaya çıxdı. Konsepsiya CSS-dən götürülüb: stilləri mantıqdan oxunaqlılıq və performans üçün ayırın. İllər keçdikcə API genişləndi: absoluteFill, hairlineWidth, flatten əlavə edildi.

StyleSheet.create vs inline-stillər

StyleSheet.create və inline-stillər arasındakı fərq performans üçün kritik əhəmiyyət daşıyır. Inline-stil — komponentin hər renderində yaradılan adi JavaScript obyektidir. StyleSheet.create — modul yüklənərkən bir dəfə yaradılan və rəqəmsal ID-yə çevrilən obyekt.

Inline-stil ötürərkən React Native hər dəfə bütün obyekti JavaScript-Native körpüsü vasitəsilə göndərir. Mürəkkəb stilləri olan komponent üçün bu, hər renderdə ötürülən onlarla xüsusiyyətdir. StyleSheet.create yalnız rəqəm identifikatoru ötürür, körpü yükünü azaldır.

// StyleSheet.create — optimallaşdırılmış yanaşma
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

// Inline style — hər renderdə yeni obyekt yaradır
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

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

Inline nə vaxt istifadə edilməlidir: vəziyyətdən asılı olan dinamik stillər üçün (pressed, selected, active). Statik stillər üçün həmişə StyleSheet.create-dən istifadə edin. Qayda: statika → create, dinamika → inline-funksiya.

StyleSheet vasitəsilə Flexbox düzülüşü

Flexbox — React Native-də yeganə düzülüş mexanizmi (CSS Grid dəstəklənmir, float isə mövcud deyil). StyleSheet.create flex-konteynerləri və onların uşaq elementlərini təsvir etmək üçün istifadə olunur. Əsas xüsusiyyətlər: flex (doldurma əmsalı), flexDirection (row | column), justifyContent, alignItems.

React Native-də defolt flexDirection column-dur (CSS-də — row). Veb inkişafından keçərkən yadda saxlanmalı ilk şey budur. Bütün View-lər defolt olaraq flex-konteynerlərdir. Elementi mərkəzləşdirmək üçün alignItems: 'center' + justifyContent: 'center' istifadə edin.

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',
  },
});

Vacib: React Native-də bütün ölçülər vahidsiz verilir (sadəcə rəqəm). Faizlər işləyir, lakin yalnız valideynə nisbətən width və height üçün. margin və padding rəqəmlər qəbul edir. Adaptivlik üçün faizlər əvəzinə flex istifadə edin — bu müxtəlif ekranlarda daha etibarlıdır.

StyleSheet API: create, flatten, hairlineWidth, absoluteFill

StyleSheet API-yə create-dən başqa bir neçə metod daxildir. StyleSheet.flatten stillər massivini bir obyektdə birləşdirir — kompozisiya və stillərin xarici komponentlərə ötürülməsi üçün faydalıdır. StyleSheet.hairlineWidth cihazda minimal görünən xətt enini qaytarır.

StyleSheet.absoluteFill — əvvəlcədən təyin edilmiş stil { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }. Overlay qatları, modal pəncərələr və bütün ekranı əhatə edən mütləq yerləşdirmə üçün istifadə olunur. StyleSheet.absoluteFillObject — genişləndirmə üçün obyekt formasında eyni şey.

// flatten — stillərin birləşdirilməsi
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 xətt
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth ayırıcılar və haşiyələr üçün faydalıdır — ekran sıxlığından asılı olmayaraq həmişə 1 fiziki piksel kimi görünür. Retina displeylərdə bu 0.5 məntiqi nöqtə, adi ekranlarda — 1 nöqtədir. HairlineWidth-i ciddi şəkildə müəyyən ölçüdə olmalı elementlər üçün istifadə etməyin.

Dimensions API ilə adaptiv düzülüş

Dimensions API StyleSheet ilə birlikdə müxtəlif ekran ölçülərinə uyğunlaşan düzülüş üçün istifadə olunur. Dimensions.get('window') pəncərənin enini və hündürlüyünü qaytarır. Ekran döndərilməsi zamanı reaktiv yeniləmə üçün React Native-dən useWindowDimensions hook-undan istifadə edin.

StyleSheet.create CSS-də olduğu kimi media sorğularını dəstəkləməsə də, siz create daxilində Dimensions əsasında dəyərlər hesablaya və ya funksiya vasitəsilə dinamik stillərdən istifadə edə bilərsiniz. Breakpoints üçün müxtəlif en diapazonları üçün ayrı stillər yaradın.

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 döndərilməsi və Split View ilə planşetlərdə pəncərə ölçüsünün dəyişməsi zamanı avtomatik yenilənir. SSR (React Native Web) üçün Dimensions.get-in komponent mount edildikdən sonra çağırıldığından əmin olun ki, server və müştəri arasında uyğunsuzluq olmasın.

Layihədə stillərin təşkili

StyleSheet-in təşkili layihədə kodun davamlılığına və təkrar istifadəsinə təsir edir. Üç yanaşma: komponent daxilində lokal stillər (styles.js komponentin yanında), qlobal stillər (rənglər, boşluqlar, tipoqrafiya sabitləri ilə theme.js) və kompozisiya vasitəsilə modul stillər.

Tövsiyə olunan struktur: rənglər, ölçülər və tipoqrafiya sabitləri ilə theme.js; hər komponentin spesifik stilləri üçün onun yanında Component.styles.js; əsas və spesifik stillərin birləşməsi üçün StyleSheet.flatten. Böyük layihələr üçün tema generasiyası ilə Design System-dən istifadə edin.

// theme.js — qlobal sabitlər
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',
  },
});

Modul təşkilinin üstünlükləri: rənglər və boşluqlar üçün vahid həqiqət mənbəyi, refaktorinqin sadələşdirilməsi (primary-i dəyişdiniz — bütün düymələr yeniləndi), flatten vasitəsilə stillərin təkrar istifadəsi, kodun oxunaqlılığı və proqnozlaşdırıla bilməsi. TypeScript layihələri üçün declare module vasitəsilə temaya tiplər əlavə edin.