# React Native Elements Sistema di progettazione ## Sistema di design React Native Elements Anteprima dell’interfaccia del sistema di progettazione Modifica l’attività, la durata e la scelta della pausa; esamina la convalida, l’aspetto e la reimpostazione. ## Sistema di design React Native Elements Riferimento di progettazione del sistema di progettazione Valori predefiniti del sorgente RNEUI bloccato alla versione indicata, API pubbliche dei componenti e scelte dell’applicazione identificate esplicitamente. ### Colori del tema chiaro | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | lightColors.primary | #2089dc | Valore effettivo del tema RNEUI. Ruoli come black/white invertono il loro significato visivo nel tema scuro; usa il tema attivo, non colori letterali codificati in modo rigido. | | lightColors.secondary | #ad1457 | Valore effettivo del tema RNEUI. Ruoli come black/white invertono il loro significato visivo nel tema scuro; usa il tema attivo, non colori letterali codificati in modo rigido. | | lightColors.background | #ffffff | Valore effettivo del tema RNEUI. Ruoli come black/white invertono il loro significato visivo nel tema scuro; usa il tema attivo, non colori letterali codificati in modo rigido. | | lightColors.black | #242424 | Valore effettivo del tema RNEUI. Ruoli come black/white invertono il loro significato visivo nel tema scuro; usa il tema attivo, non colori letterali codificati in modo rigido. | | lightColors.white | #ffffff | Valore effettivo del tema RNEUI. Ruoli come black/white invertono il loro significato visivo nel tema scuro; usa il tema attivo, non colori letterali codificati in modo rigido. | | lightColors.grey1 | #43484d | Valore effettivo del tema RNEUI. Ruoli come black/white invertono il loro significato visivo nel tema scuro; usa il tema attivo, non colori letterali codificati in modo rigido. | | lightColors.grey2 | #5e6977 | Valore effettivo del tema RNEUI. Ruoli come black/white invertono il loro significato visivo nel tema scuro; usa il tema attivo, non colori letterali codificati in modo rigido. | | lightColors.grey5 | #e1e8ee | Valore effettivo del tema RNEUI. Ruoli come black/white invertono il loro significato visivo nel tema scuro; usa il tema attivo, non colori letterali codificati in modo rigido. | | lightColors.success | #52c41a | Valore effettivo del tema RNEUI. Ruoli come black/white invertono il loro significato visivo nel tema scuro; usa il tema attivo, non colori letterali codificati in modo rigido. | | lightColors.error | #ff190c | Valore effettivo del tema RNEUI. Ruoli come black/white invertono il loro significato visivo nel tema scuro; usa il tema attivo, non colori letterali codificati in modo rigido. | | lightColors.warning | #faad14 | Valore effettivo del tema RNEUI. Ruoli come black/white invertono il loro significato visivo nel tema scuro; usa il tema attivo, non colori letterali codificati in modo rigido. | ### Colori del tema scuro | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | darkColors.primary | #439ce0 | Valore effettivo del tema RNEUI. Ruoli come black/white invertono il loro significato visivo nel tema scuro; usa il tema attivo, non colori letterali codificati in modo rigido. | | darkColors.secondary | #aa49eb | Valore effettivo del tema RNEUI. Ruoli come black/white invertono il loro significato visivo nel tema scuro; usa il tema attivo, non colori letterali codificati in modo rigido. | | darkColors.background | #080808 | Valore effettivo del tema RNEUI. Ruoli come black/white invertono il loro significato visivo nel tema scuro; usa il tema attivo, non colori letterali codificati in modo rigido. | | darkColors.black | #f2f2f2 | Valore effettivo del tema RNEUI. Ruoli come black/white invertono il loro significato visivo nel tema scuro; usa il tema attivo, non colori letterali codificati in modo rigido. | | darkColors.white | #080808 | Valore effettivo del tema RNEUI. Ruoli come black/white invertono il loro significato visivo nel tema scuro; usa il tema attivo, non colori letterali codificati in modo rigido. | | darkColors.grey1 | #bdc6cf | Valore effettivo del tema RNEUI. Ruoli come black/white invertono il loro significato visivo nel tema scuro; usa il tema attivo, non colori letterali codificati in modo rigido. | | darkColors.grey2 | #86939e | Valore effettivo del tema RNEUI. Ruoli come black/white invertono il loro significato visivo nel tema scuro; usa il tema attivo, non colori letterali codificati in modo rigido. | | darkColors.grey5 | #393e42 | Valore effettivo del tema RNEUI. Ruoli come black/white invertono il loro significato visivo nel tema scuro; usa il tema attivo, non colori letterali codificati in modo rigido. | | darkColors.success | #439946 | Valore effettivo del tema RNEUI. Ruoli come black/white invertono il loro significato visivo nel tema scuro; usa il tema attivo, non colori letterali codificati in modo rigido. | | darkColors.error | #bf2c24 | Valore effettivo del tema RNEUI. Ruoli come black/white invertono il loro significato visivo nel tema scuro; usa il tema attivo, non colori letterali codificati in modo rigido. | | darkColors.warning | #cfbe27 | Valore effettivo del tema RNEUI. Ruoli come black/white invertono il loro significato visivo nel tema scuro; usa il tema attivo, non colori letterali codificati in modo rigido. | ### Spaziatura predefinita e scelte esplicite dell’applicazione | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | spacing.xs | 2 | Voce pubblicata della spaziatura predefinita; questi nomi compongono un oggetto tema, non token di variabili CSS. | | spacing.sm | 4 | Voce pubblicata della spaziatura predefinita; questi nomi compongono un oggetto tema, non token di variabili CSS. | | spacing.md | 8 | Voce pubblicata della spaziatura predefinita; questi nomi compongono un oggetto tema, non token di variabili CSS. | | spacing.lg | 12 | Voce pubblicata della spaziatura predefinita; questi nomi compongono un oggetto tema, non token di variabili CSS. | | spacing.xl | 24 | Voce pubblicata della spaziatura predefinita; questi nomi compongono un oggetto tema, non token di variabili CSS. | | Sample heading | 32px / weight 700 | Scelta originale dell’esempio, configurata esplicitamente nel sorgente fornito e non rappresentata come tipo o token di raggio globale ufficiale. | | Sample body | 15px / 23px line height | Scelta originale dell’esempio, configurata esplicitamente nel sorgente fornito e non rappresentata come tipo o token di raggio globale ufficiale. | | Sample cards | 24px padding / 8px radius | Scelta originale dell’esempio, configurata esplicitamente nel sorgente fornito e non rappresentata come tipo o token di raggio globale ufficiale. | | Button component default | radius: 6 | Scelta originale dell’esempio, configurata esplicitamente nel sorgente fornito e non rappresentata come tipo o token di raggio globale ufficiale. | ### Contratti di componenti e provider | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | createTheme | mode, components, lightColors, darkColors | ThemeProvider riceve l’oggetto costruito; i valori predefiniti restano disponibili anche quando si modificano solo i componenti. | | useTheme | theme, updateTheme | L’azione di cambio dell’aspetto modifica la modalità senza reimpostare lo stato dell’applicazione. | | Input | value, onChangeText, errorMessage, ref | L’errore relativo all’attività vuota è visibile e il focus torna all’input effettivo. | | ButtonGroup | buttons, selectedIndex, onPress | L’indice controllato seleziona 15, 25 o 45 minuti; non rappresenta la durata stessa. | | Switch | value, onValueChange | Il booleano controllato modifica la descrizione della pausa. | | Card | Card.Title, Card.Divider | Le superfici strutturate ereditano il tema selezionato. | | Button | title, onPress, type | L’azione di salvataggio convalida lo stato locale; la reimpostazione ripristina i valori predefiniti. | | SafeAreaProvider | Outer application provider | Contesto di integrazione necessario; il buon funzionamento sul web non dimostra il comportamento delle aree sicure sui dispositivi nativi. | ## Sistema di design React Native Elements Guida completa al sistema di progettazione Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Sistema di design React Native Elements Runtime e ambito web del sistema di progettazione ### Esegui i componenti con il tema effettivo > Questo esempio usa @rneui/themed e @rneui/base alla versione 5.0.0, React 19.2.0 e React Native Web 0.21.3. La compilazione per il browser assegna react-native a react-native-web e seleziona i moduli .web.js prima di quelli generici JavaScript. Questi sono componenti effettivi della libreria, visualizzati sul web, non riquadri HTML che imitano uno screenshot mobile. Il file di compilazione fornito include questa scelta di risoluzione, così il codice autonomo riproduce l’anteprima. ### Tieni separate le prove web e native La composizione è un editor di piani di concentrazione, non un timer in esecuzione né un gestore di notifiche. SafeAreaProvider avvolge l’applicazione come richiesto dall’integrazione, ma questo test nel browser non convalida gli inset di iOS o Android, il comportamento nativo della tastiera né le autorizzazioni per le notifiche del dispositivo. Un progetto nativo richiede, oltre a questi esempi di componenti condivisi, la compilazione per la piattaforma e verifiche sul dispositivo. - Il rendering web usa React Native Web. - Il piano è conservato solo nello stato locale React. - Non viene avviato alcun timer, notifica di sistema o salvataggio nel backend. ## Sistema di design React Native Elements Oggetti tema e colori del sistema di progettazione ### Usa i ruoli del tema attivo createTheme unisce i colori chiari e scuri integrati con eventuali override espliciti. L’esempio modifica solo i valori predefiniti dei componenti e la modalità. useTheme fornisce i colori risolti agli elementi View e Text circostanti, così il titolo principale, le descrizioni e i pannelli seguono l’aspetto selezionato. In modalità scura, black indica il ruolo del testo chiaro e white quello della superficie scura; trattare questi nomi come valori letterali dei colori comprometterebbe il tema. ### Non inventare una scala tipografica universale RNEUI offre valori predefiniti per i componenti e strumenti di personalizzazione, anziché lo stesso modello di token di un sistema di progettazione CSS. Il riferimento distingue quindi le voci effettive di defaultSpacing dalle impostazioni dell’esempio: titolo da 32px, testo del corpo da 15px e raggio delle schede da 8px. Queste dimensioni sono scelte originali della composizione, visibili nel codice. Non vanno descritte come regole di brand React Native Elements obbligatorie. ## Sistema di design React Native Elements Convalida dell’input e focus nel sistema di progettazione ### Gestisci esplicitamente il testo dell’attività Input riceve un valore e una callback onChangeText. L’azione di conferma rimuove gli spazi iniziali e finali dal valore prima di stabilire se è vuoto. Se lo è, errorMessage mostra una richiesta concreta e il riferimento al componente riporta il focus sull’input. Quando il testo cambia, l’errore precedente viene cancellato e la conferma locale invalidata, così un messaggio di salvataggio ormai obsoleto non descrive un piano modificato. ### Usa insieme l’etichetta e l’errore L’etichetta visibile Focus task e accessibilityLabel identificano lo stesso controllo. Il testo segnaposto suggerisce un contenuto, ma non sostituisce l’etichetta. La convalida viene attivata dall’azione esplicita di conferma, non a ogni pressione di un tasto. Dopo un errore, l’utente conserva la bozza e nessuna animazione di salvataggio asincrona lascia intendere una richiesta al server che in realtà non avviene. ## Sistema di design React Native Elements Selezione controllata nel sistema di progettazione ### Tieni separati l’indice selezionato e la durata ButtonGroup riceve tre etichette, selectedIndex e onPress. L’indice restituito seleziona un valore dall’elenco originale [15, 25, 45] dei minuti; usarlo direttamente come numero di minuti sarebbe un errore dell’applicazione. Il riepilogo numerico in grande dell’anteprima deriva dallo stesso indice selezionato, così il controllo segmentato e il piano leggibile non possono divergere. ### Fai in modo che la scelta della pausa sia un vero valore booleano Switch riceve value e onValueChange, con un nome accessibile che descrive l'impostazione. Il riepilogo passa da una breve pausa all'assenza del promemoria di pausa. È solo una preferenza del piano: l'interfaccia non registra promemoria di sistema né programma notifiche. La formulazione della conferma di mantenimento ribadisce questo ambito locale. ## React Native Elements Conservazione e ripristino dello stato del sistema di design ### Mantieni il tema indipendente dal piano La modifica dell'aspetto chiama updateTheme con la modalità opposta. L'attività, la durata selezionata, l'impostazione della pausa e la conferma locale restano nello stato dell'applicazione, al di fuori di tale aggiornamento. I componenti nativi ricevono il nuovo tema senza ricreare il piano. Il controllo nel browser modifica l'aspetto dopo aver inserito un'attività personalizzata, per verificare che la modalità visiva non sia collegata per errore al ripristino dei dati. ### Usa un'unica azione di ripristino esplicita Il ripristino del piano riporta l'attività di esempio, la durata di 25 minuti e la pausa attiva, cancella l'errore di convalida e rimuove la conferma. L'aspetto selezionato viene mantenuto. In questo modo il ripristino dei contenuti è distinto dalla preferenza del tema ed evita un ricaricamento completo della pagina, che potrebbe risultare inatteso. L'esempio non include un livello di persistenza, quindi riaprendo il documento si parte dai dati iniziali di esempio. ## React Native Elements Composizione adattiva del sistema di design ### Adatta la disposizione delle due schede Il contenuto usa useWindowDimensions per scegliere una disposizione in riga sopra i 700px e in colonna alle larghezze inferiori. Ogni Card ha margine esterno pari a zero, così la spaziatura di 24px della composizione determina l'allineamento. Sotto i 500px, il padding esterno si riduce a 16px. Le due schede presentano un piano modificabile e un riepilogo derivato, anziché segnaposto decorativi ripetuti. ### Esamina i valori predefiniti dei componenti in entrambi i temi Gli interni dei componenti RNEUI possono applicare stili predefiniti propri, oltre ai colori globali. Per esempio, in questo esempio i segmenti non selezionati di ButtonGroup mantengono lo stile nativo della superficie. Se un prodotto richiede un contrasto o una densità visiva diversi, è possibile specificare esplicitamente buttonStyle e selectedButtonStyle, ma questa scelta va verificata con dei test e non attribuita alla tematizzazione globale automatica. ## React Native Elements Configurazione completa del browser per il sistema di design ### Includi la risoluzione per il web e i loader degli asset Il file build.mjs fornito usa esbuild con parsing JSX per le dipendenze JavaScript, aliasing di react-native-web, priorità per .web.js e loader di dati per gli asset PNG e TTF inclusi nei pacchetti. L'entry point del pacchetto include esportazioni che fanno riferimento a questi asset anche quando la composizione visibile non include icone. La build non può quindi essere sostituita con un semplice import nel browser del sorgente non elaborato. ### Prova l'intera interazione locale Salva il sorgente fornito come rne.jsx e HTML come index.html, installa i pacchetti con versioni bloccate, esegui la build e servi la directory. Prova un'attività vuota, un'attività personalizzata, una durata diversa, l'interruttore della pausa, la modifica dell'aspetto e il ripristino. In questo modo si verifica la composizione fornita, ma non si convalidano automaticamente tutti i componenti RNEUI esportati né tutte le piattaforme native. 1. Tieni i tre file forniti nella stessa directory. 2. Installa le dipendenze con versioni bloccate ed esegui node build.mjs. 3. Servi il bundle generato con index.html. 4. Prova gli stati vuoto, modificato, tematizzato e ripristinato. ## React Native Elements Esempi di componenti del sistema di design ### rne.jsx Provider completo, componenti nativi e stato dell'applicazione. ``` import React,{useState,useRef} from 'react'; import {createRoot} from 'react-dom/client'; import {View,Text,useWindowDimensions} from 'react-native'; import {ThemeProvider,createTheme,Button,ButtonGroup,Input,Switch,Card,Divider,useTheme} from '@rneui/themed'; import {SafeAreaProvider} from 'react-native-safe-area-context'; const theme=createTheme({mode:'light',components:{Button:{radius:6},Input:{containerStyle:{paddingHorizontal:0}}}}); function App(){const {theme,updateTheme}=useTheme();const {width}=useWindowDimensions();const [title,setTitle]=useState('Read a chapter'),[duration,setDuration]=useState(1),[breaks,setBreaks]=useState(true),[error,setError]=useState(false),[saved,setSaved]=useState('');const input=useRef(null);let c=theme.colors;function changed(){setSaved('')}function save(){if(!title.trim()){setError(true);input.current?.focus();return;}setError(false);setSaved(`${title.trim()} · ${[15,25,45][duration]} minutes · ${breaks?'with a short break':'no break reminder'}. Kept in this preview only.`)}return REACT NATIVE ELEMENTS · WEB STUDYMake room for one thing