PricingLoginStart free
React Academy · leksjon

Styling med StyleSheet-API-et og Flexbox

Skriv mobilstiler med StyleSheet.create og Flexbox, uten CSS-klassenavn.

Leksjon 2 av 412 trinn

Styling med StyleSheet-API-et og Flexbox er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Ingen CSS i React Native

React Native bruker et JavaScript-basert API for styling – ingen CSS-filer, ingen klassenavn og ingen kaskadering. Stiler er JavaScript-objekter som brukes via style-propen.

StyleSheet.create()

Pakk inn stilobjekter i StyleSheet.create() for bedre ytelse (stilene valideres og optimaliseres én gang) og autofullføring i IDE-en.

import { StyleSheet, View, Text } from 'react-native';

function Card() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Hello</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: { padding: 16, backgroundColor: '#fff', borderRadius: 8, shadowColor: '#000', shadowOpacity: 0.1, elevation: 2 },
  title: { fontSize: 18, fontWeight: 'bold', color: '#111' },
});

Inline-stiler

Bruk stiler direkte via style-propen. Matrisesyntaks slår sammen flere stilobjekter – senere stiler overstyrer tidligere stiler.

<View style={{ padding: 16, backgroundColor: '#f5f5f5' }} />

// Array merging:
<Text style={[styles.base, isActive && styles.active, { marginTop: 8 }]} />

Flexbox i React Native

React Native bruker Flexbox som standard for layout, men med andre standardverdier enn på nettet: flexDirection har standardverdien 'column' (ikke 'row'), og flex: 1 fyller tilgjengelig plass.

const styles = StyleSheet.create({
  container: {
    flex: 1,                   // fill available space
    flexDirection: 'column',   // default in RN (web default is 'row')
    justifyContent: 'center',  // main axis alignment
    alignItems: 'center',      // cross axis alignment
  },
});

Radoppsett

Bruk flexDirection: 'row' for å plassere underordnede elementer vannrett, på samme måte som CSS display: flex; flex-direction: row.

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12, // gap is supported in RN 0.71+
  },
});

<View style={styles.row}>
  <Image source={avatar} />
  <Text>{username}</Text>
</View>

flex kontra width/height

Bruk flex: N for proporsjonal størrelsesangivelse. flex: 1 fyller all gjenværende plass, mens flex: 2 får dobbelt så mye plass som søsken med flex: 1.

// Sidebar takes 1/3, content takes 2/3:
<View style={{ flexDirection: 'row', flex: 1 }}>
  <View style={{ flex: 1, backgroundColor: '#eee' }}>Sidebar</View>
  <View style={{ flex: 2 }}>Content</View>
</View>

Absolutt posisjonering

Bruk position: 'absolute' sammen med top, right, bottom og left for overliggende elementer – identisk med absolutt posisjonering i CSS innenfor en relativ overordnet komponent.

const badge = StyleSheet.create({
  badge: {
    position: 'absolute',
    top: -4,
    right: -4,
    width: 16,
    height: 16,
    borderRadius: 8,
    backgroundColor: 'red',
  },
});

Plattformspesifikke stiler

Bruk Platform.OS eller Platform.select() for å bruke ulike stiler på iOS og Android.

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  shadow: {
    ...Platform.select({
      ios: { shadowColor: '#000', shadowOpacity: 0.2, shadowRadius: 4 },
      android: { elevation: 4 },
    }),
  },
});

Farger

React Native støtter CSS-fargestrenger (hex, rgb og navngitte farger) samt PlatformColor-API-et for systemfarger.

import { PlatformColor } from 'react-native';

// System color — adapts to dark mode automatically:
const labelColor = PlatformColor('label', '#000'); // iOS 'label' semantic color

Dynamiske stiler med props

Beregn stiler fra props inne i komponenten. Send en funksjon til StyleSheet, eller beregn stilobjektet direkte i koden.

function Badge({ color, size = 16 }: { color: string; size?: number }) {
  return (
    <View
      style={[
        styles.badge,
        { backgroundColor: color, width: size, height: size, borderRadius: size / 2 },
      ]}
    />
  );
}

const styles = StyleSheet.create({ badge: { position: 'absolute' } });

Hurtigsjekk

Hva er standardverdien for flexDirection i React Native (til forskjell fra på nettet)?

Besvar den i den interaktive leksjonen

Oppsummering

Bruk StyleSheet.create() for optimaliserte stiler, og bruk dem via style-propen. Flexbox i React Native har som standard flexDirection: 'column', og flex: 1 fyller gjenværende plass. Bruk Platform.select() for plattformspesifikke skygge-stiler.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs
88
Leksjoner
324
Start læringen gratisSe hele kurset

Ofte stilte spørsmål

Er leksjonen «Styling med StyleSheet-API-et og Flexbox» gratis?

Ja – hele teksten i «Styling med StyleSheet-API-et og Flexbox» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Styling med StyleSheet-API-et og Flexbox»?

Skriv mobilstiler med StyleSheet.create og Flexbox, uten CSS-klassenavn. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Styling med StyleSheet-API-et og Flexbox»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

  1. React Native-kjernekomponenter kontra Web DOM
  2. Styling med StyleSheet-API-et og Flexbox
  3. Navigasjon med Expo Router
  4. Tilgang til enhets-API-er: kamera, posisjon og push-varsler
← Tilbake til React Academy