PricingLoginStart free
React Native Academy · Lektion

StyleSheet.create og inline-typografier

Opret style-objekter med StyleSheet.create af hensyn til ydeevnen, sammenlign dem med inline-typografier, og anvend flere typografier ved hjælp af arrays.

Lektion 1 af 413 trin

StyleSheet.create og inline-typografier er en gratis React Native Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i React Native Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Native Academy-kurset indeholder 4 lektioner i alt.

Sådan fungerer styles i React Native

Styling i React Native er inspireret af CSS, men bruger JavaScript-objekter i stedet for CSS-filer. Navne på egenskaber skrives i camelCase (backgroundColor og ikke background-color), og værdier for længder og størrelser er tal, der repræsenterer enhedsuafhængige pixels — ikke strenge som '16px'. Der findes ingen selectors, cascading eller nedarvning (bortset fra skrifttyper i indlejrede Text-komponenter). Hver komponent styles individuelt via en style-prop, så du har direkte kontrol over hvert elements udseende.

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

export default function StyledBox() {
  return (
    // Inline style object directly
    <View style={{
      width: 120,
      height: 120,
      backgroundColor: '#4f86f7',
      borderRadius: 16,
      padding: 16,
    }}>
      <Text style={{ color: '#fff', fontSize: 18, fontWeight: 'bold' }}>
        Hello!
      </Text>
    </View>
  );
}

StyleSheet.create() for bedre ydeevne

StyleSheet.create() modtager et objekt med navngivne style-definitioner og returnerer en behandlet version. Under motorhjelmen registrerer React Native disse styles i det native lag og sender kun et heltals-id ved efterfølgende renderinger i stedet for hele style-objektet. Det reducerer belastningen ved kommunikationen mellem JavaScript og native — især i lister, der renderes igen ofte. Metoden validerer også styles i udviklingstilstand og advarer dig, hvis du bruger egenskaber, der ikke understøttes. Foretræk altid StyleSheet.create frem for inline-objekter til styles, der ikke ændrer sig.

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

export default function Card() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Card Title</Text>
      <Text style={styles.body}>Card description text goes here.</Text>
    </View>
  );
}

// Defined once, referenced by name
const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    elevation: 3,
  },
  title: { fontSize: 18, fontWeight: 'bold', color: '#222' },
  body: { fontSize: 14, color: '#666', marginTop: 6, lineHeight: 20 },
});

Inline-styles: Hvornår skal de bruges

Inline-styles skrives direkte i JSX som en JavaScript-objektliteral: style={{ color: 'red' }}. De oprettes igen ved hver rendering, hvilket er en smule mindre effektivt end styles fra StyleSheet.create. Inline-styles er dog passende, når style-værdien er dynamisk — altså beregnes ud fra props eller state under kørsel. Det kan f.eks. være at angive backgroundColor ud fra en brugers valgte temafarve eller at beregne width ud fra den aktuelle komponents state. I disse tilfælde kan StyleSheet.create ikke hjælpe, fordi værdien ændrer sig under kørsel.

import { View } from 'react-native';

// Inline style: backgroundColor is dynamic (from props)
function ColoredBox({ color, size }) {
  return (
    <View
      style={{
        backgroundColor: color,  // dynamic — must be inline
        width: size,             // dynamic — must be inline
        height: size,
        borderRadius: size / 2,
      }}
    />
  );
}

// Usage:
<ColoredBox color='#ff6b6b' size={80} />
<ColoredBox color='#4f86f7' size={40} />

Kombination af statiske og dynamiske styles

React Natives style-prop accepterer et array med style-objekter. Senere styles i arrayet tilsidesætter tidligere styles for den samme egenskab (ligesom specificitet i CSS, men enklere). Det giver dig mulighed for at kombinere en grundstyle fra StyleSheet.create med dynamiske inline-ændringer: style={[styles.box, { backgroundColor: color }]}. De statiske styles er effektive (de sendes kun som id'er), mens det dynamiske inline-objekt lægges ovenpå. Falsy-værdier i arrayet (null, undefined, false) ignoreres sikkert.

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

export default function Button({ label, primary, style }) {
  return (
    <TouchableOpacity
      style={[
        styles.base,           // always applied
        primary && styles.primary,  // conditional style
        style,                 // caller's overrides
      ]}
    >
      <Text style={[styles.text, primary && styles.primaryText]}>
        {label}
      </Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  base: { paddingVertical: 12, paddingHorizontal: 24, borderRadius: 24, borderWidth: 1.5, borderColor: '#4f86f7', alignItems: 'center' },
  primary: { backgroundColor: '#4f86f7', borderColor: '#4f86f7' },
  text: { color: '#4f86f7', fontWeight: '600', fontSize: 16 },
  primaryText: { color: '#fff' },
});

Almindelige StyleSheet-egenskaber

I denne lektion lærte du: StyleSheet.create er mere effektiv end indlejrede objekter, fordi typografier sendes som id'er og ikke som komplette objekter, typografi-arrays sammenfletter flere typografiobjekter, hvor senere poster har forrang, og useColorScheme muliggør typografi, der tager højde for mørk tilstand. Næste gang undersøger vi Flexbox-retning, justifyContent og alignItems, så du får fuld kontrol over layoutet.

const styles = StyleSheet.create({
  // Layout
  container: { flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' },
  // Box model
  box: { width: 100, height: 100, margin: 8, padding: 12 },
  // Visual
  card: { backgroundColor: '#fff', borderRadius: 12, opacity: 0.9, zIndex: 10 },
  // Borders
  bordered: { borderWidth: 1, borderColor: '#ccc', borderStyle: 'solid' },
  // Text styles (only valid on Text component)
  heading: { fontSize: 24, fontWeight: '700', color: '#333', letterSpacing: 0.5 },
});

Procentværdier i typografier

React Native understøtter procentstrenge for width, height og positioneringsegenskaber som top og left. En bredde på '100%' udfylder forælderen, '50%' optager halvdelen og så videre. Procenter beregnes i forhold til størrelsen på forældercontaineren, ikke skærmen. Det er nyttigt til kort i fuld bredde (width: '100%') og layout med to kolonner (width: '48%'). Hvis du vil have selve skærmbredden, skal du bruge Dimensions-API'et eller useWindowDimensions-hooket til responsive, dynamiske værdier.

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

export default function HalfBox() {
  const { width } = useWindowDimensions();
  const cardWidth = (width - 48) / 2; // two columns with gutters

  return (
    <View style={styles.row}>
      <View style={[styles.card, { width: cardWidth }]} />
      <View style={[styles.card, { width: cardWidth }]} />
    </View>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: 'row', gap: 16, paddingHorizontal: 16 },
  card: { height: 100, backgroundColor: '#4f86f7', borderRadius: 12 },
});

StyleSheet.flatten og sammenfletning af typografier

StyleSheet.flatten() modtager et typografi-array og returnerer ét sammenflettet objekt. Det er nyttigt, når du programmatisk skal aflæse den endelige beregnede typografiværdi — for eksempel når du læser backgroundColor fra et typografi-array for at sende den til en animation. Den løser array-typografier på samme måde som React Native: senere værdier tilsidesætter tidligere værdier. Det er også nyttigt at logge StyleSheet.flatten(styles) under fejlfinding, så du kan se præcis, hvilke typografier en komponent modtager, når al sammenfletning er udført.

import { StyleSheet } from 'react-native';

const base = StyleSheet.create({
  box: { width: 100, height: 100, backgroundColor: 'blue' },
});

const override = { backgroundColor: 'red', borderRadius: 12 };

// Merge and inspect the final style
const final = StyleSheet.flatten([base.box, override]);
console.log(final);
// {
//   width: 100,
//   height: 100,
//   backgroundColor: 'red',   ← override wins
//   borderRadius: 12           ← new property added
// }

StyleSheet.hairlineWidth

StyleSheet.hairlineWidth returnerer den tyndest mulige linjebredde på den aktuelle enhed — typisk 0,5 på Retina-skærme og 1 på skærme med lavere pixeltæthed. Brug den til tynde skillelinjer og kanter, der ser skarpe ud ved enhver pixeltæthed. Den er bedre end at hardkode borderWidth: 0.5, fordi hairlineWidth automatisk tilpasser sig skærmens pixelforhold. Det er en lille, men synlig detalje, der giver et mere gennemarbejdet udtryk på skærme med høj pixeltæthed som moderne iPhone- og Pixel-enheder.

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

// A 1-physical-pixel divider line
export default function Divider() {
  return <View style={styles.divider} />;
}

const styles = StyleSheet.create({
  divider: {
    height: StyleSheet.hairlineWidth,  // thinnest possible
    backgroundColor: '#e0e0e0',
    marginVertical: 8,
  },
});

// StyleSheet.hairlineWidth value:
// Retina (2× pixel ratio) → 0.5
// 3× pixel ratio → 0.333...
// 1× screen → 1

Placering af typografier sammen med komponenter

En almindelig konvention er at definere typografier nederst i den samme fil som den komponent, der bruger dem. Det holder relateret kode samlet og gør det let at forstå en komponents fulde visuelle specifikation uden at åbne en anden fil. For meget store komponenter med mange typografisektioner kan du dele typografierne op i en separat ComponentName.styles.ts-fil. Undgå at oprette én global styles.js-fil til hele appen — den bliver hurtigt uoverskuelig og gør det svært at vide, hvor de forskellige typografier bruges.

// ProfileCard.tsx
import { View, Text, StyleSheet } from 'react-native';

export default function ProfileCard({ name, bio }) {
  return (
    <View style={styles.card}>
      <Text style={styles.name}>{name}</Text>
      <Text style={styles.bio}>{bio}</Text>
    </View>
  );
}

// Styles defined at the bottom of the same file
const styles = StyleSheet.create({
  card: { backgroundColor: '#fff', borderRadius: 16, padding: 20 },
  name: { fontSize: 20, fontWeight: 'bold', color: '#111' },
  bio: { fontSize: 14, color: '#555', marginTop: 6, lineHeight: 20 },
});

Typografier, der tager højde for mørk tilstand

Hvis du vil understøtte mørk tilstand, skal du bruge useColorScheme-hooket til at registrere den aktuelle tilstand ('light' eller 'dark') og derefter vælge forskellige farveværdier for hver tilstand. Kombiner dette med dit typografi-array: grundtypografierne indeholder layout og form, mens et dynamisk farveobjekt anvender tematilpassede farver. En mere skalerbar tilgang er en ThemeContext, der stiller farvetokens til rådighed i hele appen, men useColorScheme er den hurtigste måde at få mørk tilstand til at fungere uden ekstra biblioteker.

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

export default function ThemedCard({ title }) {
  const scheme = useColorScheme(); // 'light' | 'dark'
  const colors = scheme === 'dark'
    ? { bg: '#1c1c1e', text: '#f0f0f0', border: '#3a3a3c' }
    : { bg: '#ffffff', text: '#111111', border: '#e0e0e0' };

  return (
    <View style={[styles.card, { backgroundColor: colors.bg, borderColor: colors.border }]}>
      <Text style={[styles.title, { color: colors.text }]}>{title}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: { borderWidth: 1, borderRadius: 12, padding: 16, marginBottom: 12 },
  title: { fontSize: 18, fontWeight: '600' },
});

Styled Components i React Native

Hvis du foretrækker en CSS-in-JS-syntaks, fungerer styled-components med React Native. Installer det med npm install styled-components, og brug fabrikkerne styled.View og styled.Text. Styled-components genererer optimerede StyleSheet-poster i baggrunden, samtidig med at du kan skrive en CSS-lignende syntaks med skabelonlitteraler (brug enkelte anførselstegn indeni, ikke backticks med interpolation til statiske typografier). Det understøtter også dynamisk typografi baseret på props med fuld TypeScript-understøttelse. Mange teams foretrækker det på grund af den velkendte oplevelse ved at skrive CSS.

import styled from 'styled-components/native';

// Define styled components
const Card = styled.View`
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  elevation: 3;
`;

const Title = styled.Text`
  font-size: 18px;
  font-weight: bold;
  color: #222;
`;

export default function StyledCard({ title }) {
  return (
    <Card>
      <Title>{title}</Title>
    </Card>
  );
}

Hurtig kontrol

Test din forståelse af begreberne inden for React Native Mobile Development fra denne lektion.

Besvar den i den interaktive lektion

Opsummering af lektionen

I denne lektion lærte du: StyleSheet.create er mere effektivt end inline-objekter, fordi stilene sendes som id'er i stedet for komplette objekter, stil-arrays kombinerer flere stilobjekter, hvor senere elementer har forrang, og useColorScheme gør det muligt at tilpasse stilene til mørk tilstand. Dernæst undersøger vi Flexbox-retning, justifyContent og alignItems for at få fuld kontrol over layoutet.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
30
Lektioner
120
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “StyleSheet.create og inline-typografier” gratis?

Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “StyleSheet.create og inline-typografier”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. React Native Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “StyleSheet.create og inline-typografier”?

Opret style-objekter med StyleSheet.create af hensyn til ydeevnen, sammenlign dem med inline-typografier, og anvend flere typografier ved hjælp af arrays. Du øver dig i React Native Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Native Academy?

Der kræves ingen tidligere erfaring. React Native Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “StyleSheet.create og inline-typografier”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Native Academy-lektion?

Ja. Alle React Native Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. StyleSheet.create og inline-typografier
  2. Flexbox-retning, justifyContent og alignItems
  3. flex, flexGrow og responsiv størrelsestilpasning
  4. Opbygning af et responsivt kortgitter
← Tilbage til React Native Academy