RN Lez 07: View, Text e StyleSheet

Docs: View, Text, StyleSheet, Style

Obiettivi

• Usare View come contenitore flessibile
• Usare Text con stili ereditati
• Separare gli stili con StyleSheet.create()

---

1. View — il contenitore universale

View è il mattone fondamentale di React Native. Supporta flexbox, stili, eventi.

<View style={{
    width: 100,
    height: 100,
    backgroundColor: 'blue',
    borderRadius: 10,
}} />

Ogni View è:

• Un contenitore rettangolare
• Nestabile (View dentro View)
• Stylizzabile con tutte le proprietà CSS

---

2. Text — il testo

Tutto il testo DEVE stare dentro <Text>.

// ✅ Corretto
<Text style={{ fontSize: 18 }}>Ciao mondo</Text>

// ❌ ERRORE — testo fuori da Text
<View>Ciao mondo</View>

Testo annidato

<Text style={{ color: 'blue' }}>
    Questo è blu
    <Text style={{ fontWeight: 'bold', color: 'red' }}>
        {' '}e questo è rosso grassetto{' '}
    </Text>
    e questo torna blu
</Text>

Stili per Text

Proprietà	Valori	Descrizione
fontSize	numero	Dimensione carattere
fontWeight	'bold', 'normal', '100'-'900'	Grassetto
fontStyle	'italic', 'normal'	Corsivo
color	colore	Colore testo
textAlign	'center', 'left', 'right'	Allineamento
lineHeight	numero	Altezza riga
letterSpacing	numero	Spaziatura lettere
textTransform	'uppercase', 'lowercase', 'capitalize'	Trasformazione

---

3. StyleSheet — stili separati

StyleSheet.create() separa il markup dagli stili (come CSS esterno).

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

// --- Markup ---
<View style={styles.container}>
    <Text style={styles.titolo}>Titolo</Text>
    <Text style={styles.descrizione}>Descrizione</Text>
</View>

// --- Stili (fuori dal componente) ---
const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
        backgroundColor: '#f5f5f5',
    },
    titolo: {
        fontSize: 24,
        fontWeight: 'bold',
        color: '#333',
        marginBottom: 10,
    },
    descrizione: {
        fontSize: 16,
        color: 'grey',
        lineHeight: 24,
    },
});

Perché StyleSheet?

Oggetto inline	StyleSheet.create()
<View style={{ padding: 10 }}>	<View style={styles.container}>
Ricreato a ogni render	Una volta sola
Performance leggermente peggiore	Ottimizzato
Difficile da riutilizzare	Facile da riutilizzare

Array di stili

<View style={[styles.base, styles.extra]} />          // unisce
<View style={[styles.base, cond && styles.cond]} />   // condizionale

---

4. Box Model

padding: 20,                // tutti i lati
paddingHorizontal: 20,      // sinistra + destra
paddingVertical: 10,        // sopra + sotto
paddingTop: 10,             // solo sopra
margin: 20,
marginBottom: 10,

borderWidth: 2,
borderColor: '#ccc',
borderRadius: 12,            // angoli arrotondati

---

5. Ombre

// iOS
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 8,

// Android
elevation: 4,

---

6. Esempio: Card Profilo

type CardProps = {
    nome: string;
    ruolo: string;
    colore: string;
};

const Card = ({ nome, ruolo, colore }: CardProps) => (
    <View style={styles.card}>
        <View style={[styles.avatar, { backgroundColor: colore }]}>
            <Text style={styles.iniziale}>{nome[0]}</Text>
        </View>
        <View style={styles.info}>
            <Text style={styles.nome}>{nome}</Text>
            <Text style={styles.ruolo}>{ruolo}</Text>
        </View>
    </View>
);

const styles = StyleSheet.create({
    card: {
        flexDirection: 'row',
        backgroundColor: 'white',
        padding: 20,
        borderRadius: 12,
        marginBottom: 15,
        elevation: 3,
        shadowColor: '#000',
        shadowOpacity: 0.1,
        shadowRadius: 5,
    },
    avatar: {
        width: 50, height: 50, borderRadius: 25,
        justifyContent: 'center', alignItems: 'center',
        marginRight: 15,
    },
    iniziale: { fontSize: 22, fontWeight: 'bold', color: 'white' },
    nome: { fontSize: 18, fontWeight: 'bold' },
    ruolo: { fontSize: 14, color: 'grey' },
});

---

7. Tabella riassuntiva

Componente	Codice minimo
View	<View style={...} />
Text	<Text style={...}>testo</Text>
StyleSheet	const s = StyleSheet.create({...})

---

8. Esercizio

🎯 “Scheda prodotto”

Crea un componente CardProdotto con props { nome, prezzo, descrizione }:

• Card bianca con angoli arrotondati e ombra
• Nome grassetto 18px
• Prezzo verde 20px grassetto
• Descrizione grigia 14px
• padding 20
• Sfondo della pagina #f0f4f8