StyleSheet — vad är det, skapa stilar i React Native

Vad är StyleSheet?

StyleSheet — inbyggt API i React Native för att definiera komponentstilar. Till skillnad från CSS i webbutveckling använder RN JavaScript-objekt för att beskriva stilar. StyleSheet.create — den viktigaste metoden som tar emot ett objekt med stilar och returnerar ett objekt med numeriska identifierare.

StyleSheet är en del av React Native-kärnan och kräver inte installation av ytterligare paket. Enligt Meta-data (2026) använder 95% av React Native-projekten StyleSheet.create för statiska stilar. Alternativ: styled-components, Emotion, NativeWind (Tailwind för RN) — men den inbyggda StyleSheet förblir standarden för kärnan.

Historia och utveckling

I de tidiga versionerna av React Native (2015) definierades stilar uteslutande via inline-objekt. StyleSheet.create dök upp i RN 0.4 som en optimering. Konceptet är hämtat från CSS: separera stilar från logik för läsbarhet och prestanda. Under åren har API:et utökats: absoluteFill, hairlineWidth, flatten har lagts till.

StyleSheet.create vs inline-stilar

Skillnaden mellan StyleSheet.create och inline-stilar är kritisk för prestanda. Inline-stil — ett vanligt JavaScript-objekt som skapas vid varje rendering av komponenten. StyleSheet.create — ett objekt som skapas en gång vid modulladdning och omvandlas till ett numeriskt ID.

När en inline-stil skickas, skickar React Native varje gång hela objektet över bron JavaScript-Native. För en komponent med komplexa stilar handlar det om dussintals egenskaper som skickas vid varje rendering. StyleSheet.create skickar bara en numerisk identifierare, vilket minskar belastningen på bron.

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

// Inline style — skapar ett nytt objekt vid varje rendering
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

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

När ska inline användas: för dynamiska stilar som beror på tillstånd (pressed, selected, active). För statiska stilar, använd alltid StyleSheet.create. Regel: statisk → create, dynamisk → inline-funktion.

Flexbox-layout via StyleSheet

Flexbox — den enda layoutmekanismen i React Native (CSS Grid stöds inte och float finns inte). StyleSheet.create används för att beskriva flex-containrar och deras underordnade element. Huvudegenskaper: flex (fyllnadskoefficient), flexDirection (row | column), justifyContent, AlignItems.

Som standard är flexDirection i React Native column (i CSS — row). Detta är det första att komma ihåg vid övergång från webbutveckling. Alla View är som standard flex-containrar. För att centrera ett element, använd 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',
  },
});

Viktigt: i React Native anges alla mått utan enheter (bara ett nummer). Procent fungerar, men bara för width och height i förhållande till föräldern. margin och padding accepterar siffror. För anpassningsbarhet, använd flex istället för procent — det är mer tillförlitligt på olika skärmar.

StyleSheet API: create, flatten, hairlineWidth, absoluteFill

StyleSheet API innehåller flera metoder förutom create. StyleSheet.flatten kombinerar en array av stilar till ett objekt — användbart för komposition och överföring av stilar till tredjepartskomponenter. StyleSheet.hairlineWidth returnerar den minsta synliga linjebredden på enheten.

StyleSheet.absoluteFill — en fördefinierad stil { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }. Används för överlagringsskikt, modala fönster och absolut positionering över hela skärmen. StyleSheet.absoluteFillObject — samma sak men i objektform för utökning.

// flatten — slå samman stilar
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 linje
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth är användbar för avskiljare och kanter — den ser alltid ut som 1 fysisk pixel oavsett skärmdensitet. På Retina-skärmar är detta 0.5 logiska punkter, på vanliga — 1 punkt. Använd inte hairlineWidth för element som måste ha en strikt definierad storlek.

Responsiv layout med Dimensions API

Dimensions API används tillsammans med StyleSheet för responsiv layout för olika skärmstorlekar. Dimensions.get('window') returnerar fönstrets bredd och höjd. För reaktiv uppdatering vid skärmrotation, använd hooken useWindowDimensions från React Native.

Även om StyleSheet.create inte stöder media queries som CSS, kan du beräkna värden baserat på Dimensions i create eller använda dynamiska stilar via en funktion. Skapa separata stilar för olika breddintervall för brytpunkter.

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 uppdateras automatiskt vid skärmrotation och ändring av fönsterstorlek på surfplattor med Split View. För SSR (React Native Web), se till att Dimensions.get anropas efter att komponenten monterats för att undvika avvikelser mellan server och klient.

Organisering av stilar i projektet

Organisering av StyleSheet i projektet påverkar underhållbarhet och återanvändbarhet av kod. Tre tillvägagångssätt: lokala stilar inuti komponenten (styles.js bredvid komponenten), globala stilar (theme.js med konstanter för färger, mellanrum, typografi) och modulära stilar via komposition.

Rekommenderad struktur: theme.js med konstanter för färger, storlekar och typografi; Component.styles.js bredvid varje komponent för dess specifika stilar; StyleSheet.flatten för kombination av bas- och specifika stilar. För stora projekt, använd Design System med temagenerering.

// theme.js — globala konstanter
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',
  },
});

Fördelar med modulär organisering: enda källa till sanning för färger och mellanrum, förenkling av refaktorisering (du ändrade primary — alla knappar uppdaterades), återanvändning av stilar via flatten, kodens läsbarhet och förutsägbarhet. För TypeScript-projekt, lägg till typer för temat via declare module.