StyleSheet — τι είναι, δημιουργία στυλ στο React Native

Τι είναι το StyleSheet;

StyleSheet — ενσωματωμένο API React Native για ορισμό στυλ εξαρτημάτων. Σε αντίθεση με το CSS στην ανάπτυξη ιστού, το RN χρησιμοποιεί αντικείμενα JavaScript για την περιγραφή στυλ. StyleSheet.create — η βασική μέθοδος που λαμβάνει ένα αντικείμενο με στυλ και επιστρέφει ένα αντικείμενο με αριθμητικά αναγνωριστικά.

Το StyleSheet αποτελεί μέρος του πυρήνα του React Native και δεν απαιτεί εγκατάσταση πρόσθετων πακέτων. Σύμφωνα με δεδομένα της Meta (2026), το 95% των έργων React Native χρησιμοποιούν StyleSheet.create για στατικά στυλ. Εναλλακτικές: styled-components, Emotion, NativeWind (Tailwind για RN) — αλλά το ενσωματωμένο StyleSheet παραμένει το πρότυπο για τον πυρήνα.

Ιστορία και εξέλιξη

Στις πρώτες εκδόσεις του React Native (2015), τα στυλ ορίζονταν αποκλειστικά μέσω inline αντικειμένων. Το StyleSheet.create εμφανίστηκε στο RN 0.4 ως βελτιστοποίηση. Η ιδέα προέρχεται από το CSS: διαχωρίστε τα στυλ από τη λογική για αναγνωσιμότητα και απόδοση. Με τα χρόνια το API επεκτάθηκε: προστέθηκαν absoluteFill, hairlineWidth, flatten.

StyleSheet.create vs inline στυλ

Η διαφορά μεταξύ StyleSheet.create και inline στυλ είναι κρίσιμη για την απόδοση. Inline στυλ — ένα συνηθισμένο αντικείμενο JavaScript που δημιουργείται σε κάθε απόδοση του εξαρτήματος. StyleSheet.create — ένα αντικείμενο που δημιουργείται μία φορά κατά τη φόρτωση της ενότητας και μετατρέπεται σε αριθμητικό ID.

Κατά τη μετάδοση ενός inline στυλ, το React Native κάθε φορά στέλνει ολόκληρο το αντικείμενο μέσω της γέφυρας JavaScript-Native. Για ένα εξάρτημα με σύνθετα στυλ, αυτό είναι δεκάδες ιδιότητες που μεταδίδονται σε κάθε απόδοση. Το StyleSheet.create μεταδίδει μόνο ένα αριθμητικό αναγνωριστικό, μειώνοντας το φορτίο της γέφυρας.

// StyleSheet.create — βελτιστοποιημένη προσέγγιση
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

// Inline style — δημιουργεί νέο αντικείμενο σε κάθε απόδοση
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

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

Πότε να χρησιμοποιείτε inline: για δυναμικά στυλ που εξαρτώνται από κατάσταση (pressed, selected, active). Για στατικά στυλ χρησιμοποιείτε πάντα StyleSheet.create. Κανόνας: στατικά → create, δυναμικά → inline συνάρτηση.

Διάταξη Flexbox μέσω StyleSheet

Flexbox — ο μοναδικός μηχανισμός διάταξης στο React Native (το CSS Grid δεν υποστηρίζεται και το float δεν υπάρχει). Το StyleSheet.create χρησιμοποιείται για την περιγραφή flex-δοχείων και των θυγατρικών τους στοιχείων. Βασικές ιδιότητες: flex (συντελεστής πλήρωσης), flexDirection (row | column), justifyContent, AlignItems.

Από προεπιλογή, το flexDirection στο React Native είναι column (στο CSS — row). Αυτό είναι το πρώτο πράγμα που πρέπει να θυμάστε κατά τη μετάβαση από την ανάπτυξη ιστού. Όλα τα View είναι από προεπιλογή flex-δοχεία. Για να κεντράρετε ένα στοιχείο, χρησιμοποιήστε AlignItems: 'center' + justifyContent: 'center'.

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

Σημαντικό: στο React Native όλα τα μεγέθη καθορίζονται χωρίς μονάδες (απλώς ένας αριθμός). Τα ποσοστά λειτουργούν, αλλά μόνο για width και height σε σχέση με το γονέα. Το margin και padding δέχονται αριθμούς. Για προσαρμοστικότητα χρησιμοποιήστε flex αντί για ποσοστά — είναι πιο αξιόπιστο σε διαφορετικές οθόνες.

API StyleSheet: create, flatten, hairlineWidth, absoluteFill

API StyleSheet περιλαμβάνει αρκετές μεθόδους εκτός από το create. Το StyleSheet.flatten συνδυάζει έναν πίνακα στυλ σε ένα ενιαίο αντικείμενο — χρήσιμο για σύνθεση και μετάδοση στυλ σε εξαρτήματα τρίτων. Το StyleSheet.hairlineWidth επιστρέφει το ελάχιστο ορατό πλάτος γραμμής στη συσκευή.

StyleSheet.absoluteFill — ένα προκαθορισμένο στυλ { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }. Χρησιμοποιείται για επικαλυπτόμενα στρώματα, modal παράθυρα και απόλυτη τοποθέτηση σε ολόκληρη την οθόνη. StyleSheet.absoluteFillObject — το ίδιο πράγμα αλλά σε μορφή αντικειμένου για επέκταση.

// flatten — συγχώνευση στυλ
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 — ελάχιστη γραμμή
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth είναι χρήσιμο για διαχωριστικά και περιγράμματα — φαίνεται πάντα σαν 1 φυσικό pixel ανεξάρτητα από την πυκνότητα οθόνης. Σε οθόνες Retina αυτό είναι 0.5 λογικές μονάδες, σε κανονικές — 1 μονάδα. Μην χρησιμοποιείτε hairlineWidth για στοιχεία που πρέπει να έχουν αυστηρά καθορισμένο μέγεθος.

Προσαρμοστική διάταξη με Dimensions API

Dimensions API χρησιμοποιείται μαζί με το StyleSheet για προσαρμοστική διάταξη σε διαφορετικά μεγέθη οθόνης. Το Dimensions.get('window') επιστρέφει το πλάτος και το ύψος του παραθύρου. Για αντιδραστική ενημέρωση κατά την περιστροφή οθόνης, χρησιμοποιήστε το hook useWindowDimensions από το React Native.

Αν και το StyleSheet.create δεν υποστηρίζει media queries όπως το CSS, μπορείτε να υπολογίζετε τιμές βάσει του Dimensions μέσα στο create ή να χρησιμοποιείτε δυναμικά στυλ μέσω συνάρτησης. Για σημεία διακοπής, δημιουργήστε ξεχωριστά στυλ για διαφορετικά εύρη πλάτους.

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 ενημερώνεται αυτόματα κατά την περιστροφή οθόνης και την αλλαγή μεγέθους παραθύρου σε tablet με Split View. Για SSR (React Native Web) βεβαιωθείτε ότι το Dimensions.get καλείται μετά την τοποθέτηση του εξαρτήματος για να αποφευχθούν αποκλίσεις μεταξύ διακομιστή και πελάτη.

Οργάνωση στυλ στο έργο

Οργάνωση StyleSheet στο έργο επηρεάζει τη συντηρησιμότητα και την επαναχρησιμοποίηση κώδικα. Τρεις προσεγγίσεις: τοπικά στυλ εντός του εξαρτήματος (styles.js δίπλα στο εξάρτημα), καθολικά στυλ (theme.js με σταθερές χρωμάτων, αποστάσεων, τυπογραφίας) και αρθρωτά στυλ μέσω σύνθεσης.

Προτεινόμενη δομή: theme.js με σταθερές χρωμάτων, μεγεθών και τυπογραφίας; Component.styles.js δίπλα σε κάθε εξάρτημα για τα συγκεκριμένα στυλ του; StyleSheet.flatten για συνδυασμό βασικών και συγκεκριμένων στυλ. Για μεγάλα έργα χρησιμοποιήστε Design System με δημιουργία θέματος.

// theme.js — καθολικές σταθερές
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',
  },
});

Πλεονεκτήματα αρθρωτής οργάνωσης: ενιαία πηγή αλήθειας για χρώματα και αποστάσεις, απλοποίηση ανασχηματισμού (αλλάξατε το primary — ενημερώθηκαν όλα τα κουμπιά), επαναχρησιμοποίηση στυλ μέσω flatten, αναγνωσιμότητα και προβλεψιμότητα κώδικα. Για έργα TypeScript προσθέστε τύπους για το θέμα μέσω declare module.