0Pricing
React Academy · Lezione

Styling con API StyleSheet e Flexbox

Scriva stili mobile usando StyleSheet.create e Flexbox senza nomi di classi CSS.

Styling con API StyleSheet e Flexbox è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Niente CSS in React Native

React Native utilizza un'API JavaScript per gli stili: niente file CSS, nomi di classe o meccanismo a cascata. Gli stili sono oggetti JavaScript applicati tramite la prop style.

StyleSheet.create()

Racchiuda gli oggetti di stile in StyleSheet.create() per ottenere prestazioni migliori (gli stili vengono convalidati e ottimizzati una sola volta) e il completamento automatico dell'IDE.

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

Stili inline

Applichi gli stili direttamente tramite la prop style. La sintassi con gli array unisce più oggetti di stile: gli stili successivi sovrascrivono quelli precedenti.

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

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

Flexbox in React Native

React Native utilizza Flexbox per impostazione predefinita per il layout, ma con impostazioni predefinite diverse dal web: flexDirection è impostato su 'column' (non su 'row') e flex: 1 riempie lo spazio disponibile.

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

Layout a righe

Utilizzi flexDirection: 'row' per disporre gli elementi figli orizzontalmente, riproducendo il comportamento di 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 rispetto a width/height

Utilizzi flex: N per dimensionare gli elementi in modo proporzionale. flex: 1 riempie tutto lo spazio rimanente; flex: 2 riceve il doppio dello spazio degli elementi fratelli con 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>

Posizionamento assoluto

Utilizzi position: 'absolute' con top, right, bottom e left per gli elementi sovrapposti: è identico al posizionamento assoluto CSS all'interno di un genitore con posizionamento relativo.

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

Stili specifici per piattaforma

Utilizzi Platform.OS o Platform.select() per applicare stili diversi su iOS e Android.

import { Platform } from 'react-native';

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

Colori

React Native accetta stringhe di colori CSS (hex, rgb e con nome) e l'API PlatformColor per i colori del sistema.

import { PlatformColor } from 'react-native';

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

Stili dinamici con le props

Calcoli gli stili a partire dalle props all'interno del componente. Passi una funzione a StyleSheet oppure calcoli l'oggetto di stile inline.

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

Verifica rapida

Qual è il valore predefinito di flexDirection in React Native, diverso da quello del web?

Riepilogo

Utilizzi StyleSheet.create() per ottenere stili ottimizzati e li applichi tramite la prop style. In React Native, Flexbox utilizza flexDirection: 'column' per impostazione predefinita e flex: 1 riempie lo spazio rimanente. Utilizzi Platform.select() per gli stili delle ombre specifici del sistema operativo.

Domande Frequenti

La lezione «Styling con API StyleSheet e Flexbox» è gratuita?

Sì — il testo completo di «Styling con API StyleSheet e Flexbox» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Styling con API StyleSheet e Flexbox»?

Scriva stili mobile usando StyleSheet.create e Flexbox senza nomi di classi CSS. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Styling con API StyleSheet e Flexbox»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Componenti core di React Native e DOM web a confronto
  2. Styling con API StyleSheet e Flexbox
  3. Navigazione con Expo Router
  4. Accesso alle API del dispositivo: fotocamera, posizione e notifiche push
← Torna a React Academy