Quindi, tornando al codice, abbiamo iniziato con il lancio di alcune viste qui e, ovviamente, in questo momento, questo non funzionerà,
questo si spezzerà o non renderà nulla di significativo sullo schermo. In quella prima vista nidificata qui, in questo blocco,
sono andato
ad avere un input di testo e un pulsante. Convenientemente, entrambi sono forniti da React Native, qui abbiamo un
input di testo e abbiamo anche un componente pulsante. Quindi possiamo importare sia l'input di testo che consente
all'utente di inserire testo e pulsante e quindi qui in quella vista, in quella prima vista nidificata, aggiungerò
un input di testo come tag autochiudente perché non c'è nulla che potremmo passare tra l'apertura e tag di chiusura e per
il pulsante, potresti pensare
di usare un pulsante come questo ma in realtà, non è così che funziona questo
pulsante
React Native, invece è un pulsante a chiusura automatica e imposti una proprietà del titolo per definire
quale testo rendere lì e qui, potremmo dire aggiungere. Ora abbiamo un input di testo e un
pulsante lì e se salviamo questo e questo si ricarica, vediamo il pulsante qui ma non vediamo l'input di testo, giusto?
Quindi non funziona come previsto.
La ragione di ciò è che l'immissione di testo sarà nascosta qui sotto la barra di stato.
Quindi ora è il momento in cui dovremmo iniziare con l'aggiunta di un po 'di layout, una
certa struttura a questa pagina perché solo
l'aggiunta di componenti da soli non farà il trucco, un'app React Native si basa sull'uso dei
componenti e quindi sull'aggiunta del layout giusto, il giusto struttura ai tuoi componenti. Quindi qui ad esempio, avrebbe senso aggiungere un po 'di padding generale attorno a quella vista,
quindi su questa vista dall'alto, quindi il padding è fondamentalmente una certa distanza dal bordo di quella vista che è fondamentalmente il
frame del dispositivo nel nostro caso qui
da quando sono parlando della vista più in alto al contenuto della vista, quindi un po 'di spazio tra i bordi
della vista più in alto, della vista circostante e del contenuto nella vista e per questo, possiamo aggiungere la
proprietà dello stile qui nella vista.
La maggior parte dei componenti di React Native supporta la proprietà style, la vista funziona e lì, si utilizza questa associazione
di contenuti dinamici qui che si conosce anche dal normale React con le singole parentesi graffe e
lo stile si aspetta ora un oggetto Javascript. Quindi aggiungiamo un'altra coppia di parentesi graffe qui e
ora un errore comune è che pensi che questa sia una sintassi speciale
che richiede doppie parentesi graffe, in effetti è la normale sintassi React con parentesi graffe simili dove poi il
valore dinamico che stai passando allo stile sembra essere un oggetto
Javascript, quindi abbiamo un'altra coppia di parentesi graffe. E in questo oggetto ora puoi avere coppie
chiave-valore in cui le chiavi sono i nomi delle tue proprietà di stile e i valori sono i valori per queste
proprietà di stile e questi nomi di proprietà di stile sono influenzati dai CSS.
Quindi qui, ciò che puoi fare è aggiungere il padding, che esiste anche in React Native e un elenco
completo di proprietà di stile supportate può sempre essere trovato andando al componente che stai usando,
come la vista qui e quindi facendo clic su sulla proprietà dello stile e qui se fai clic sugli stili
di visualizzazione, vedrai un elenco di tutte le proprietà fornite che puoi utilizzare e vedrai alcune proprietà speciali per la
vista qui e quindi alcuni oggetti di scena generali come oggetti di layout e lì, troverai l'imbottitura per esempio.
Quindi è così che puoi scoprire cosa è supportato ma vedrai anche molti esempi in questo corso.
Quindi qui aggiungo il riempimento e il valore ora può essere solo un numero che sarà pixel indipendenti dal
dispositivo, quindi un valore di pixel che sembra sempre buono indipendentemente dalle dimensioni del dispositivo che hai.
Quindi qui, potremmo aggiungere 10 e se lo facciamo, ora vediamo che il pulsante è un po 'più
in basso, forse aggiungiamo 30 qui in modo da poter vedere una differenza più grande
e ora funziona e ora se tocchi sopra il pulsante, non vedi
davvero un input qui ma vedi che la mia tastiera virtuale si è aperta su Android,
su iOS non si apre di default ma
lì puoi anche toccare qui e se dovessi toccare abbastanza spesso o se vai a hardware, quella tastiera attiva o disattiva la tastiera del
software, dovrebbe aprirsi anche lì, quindi qui
abbiamo anche un input.
Quindi ora possiamo vedere quell'input perché ora non è più dietro quella barra di stato.
Quindi aggiungere quell'imbottitura probabilmente aveva senso perché ora, ci siamo assicurati che il nostro layout fosse all'interno del
nostro schermo qui.
Ora ci sono altri strumenti per assicurarsi che abbiamo abbastanza padding
anche qui, ma per ora, impostiamo manualmente il padding e forse impostiamo un valore di 30.
Quindi stavamo iniziando con il layout, ora
torniamo a questo componente e assicuriamoci di poter vedere qualcosa, possiamo
vedere che c'è un input di testo e non dobbiamo solo indovinarlo.
Per questo, possiamo andare all'input di testo e lì ad esempio aggiungere il segnaposto prop e proprio come
prima per scoprire cosa puoi
impostare, puoi sempre andare ai documenti ufficiali, in questo caso ai documenti di input di testo e lì, trovi una descrizione su come
usarlo e alcuni esempi ma se
scorri verso il basso, troverai anche tutti gli oggetti di scena che puoi impostare e lì, ad esempio, scopri
che puoi impostare un oggetto segnaposto, che è quel testo fittizio che viene visualizzato prima che l'utente
inserisca del testo.
Quindi qui, questo richiede una stringa e qui potremmo inserire l'obiettivo del corso perché dovresti essere in grado
di impostare l'obiettivo
del corso qui e se lo fai, vedi sia su Android che
su iOS c'è questo testo dell'obiettivo del corso.
Ora ancora, potrebbe essere un po
'meglio, potrebbe essere un po' più chiaro che ci sia un input di testo e quindi
qui, aggiungerò
uno stile, un altro stile in linea e qui imposterò il colore di fondo del bordo di nero, nero ora è una stringa, tali
scorciatoie di colore sono supportate in React Native e un elenco completo di tutti i colori disponibili
è allegato a questa lezione qui e posso anche vedere che una larghezza inferiore del bordo diciamo 1 e che cosa
fa è che dovrebbe impostare un fondo rasentiamo questo input in modo che ora, se torniamo indietro,
lo sottolineiamo qui, possiamo vederlo chiaramente su iOS e poiché non c'è ancora molto spazio su iOS, permettimi
di aumentare questa imbottitura qui a 50, forse, sì, sembra meglio.
Quindi ora abbiamo quel bordo sotto il nostro input e questo chiarisce che c'è un input qui.
Ovviamente non sei limitato a impostare solo un bordo in basso, puoi
anche impostare un bordo generale lasciando
qui il fondo, un colore del bordo e una larghezza del
bordo e se lo facessi, allora questo sarebbe circondato da un confine.
Ora una nota importante per quanto riguarda questi nomi di stile qui, i nomi delle proprietà dello stile, ovviamente vedi
che è la larghezza del bordo, il colore del bordo scritto in questo modo, nei CSS normali, avresti avuto il colore del bordo e
che avrebbe applicato il colore del bordo ma che avrebbe essere un nome di proprietà non valido in Javascript, motivo per
cui questo non è supportato.
Ora in realtà, un nome di proprietà valido in Javascript sarebbe se lo racchiudessi tra virgolette,
ma anche questo non è supportato in React Native, quindi queste sintassi alternative, ad esempio questa sintassi funzionerebbe in Javascript
se applichi uno stile all'elemento HTML web , queste sintassi non sono supportate in React Native però, lì devi davvero usare questa sintassi
del caso cammello dove per esempio scrivi un colore del bordo come questo o in
breve, devi usare i nomi delle proprietà che trovi anche nei documenti ufficiali, lì non ci sono nomi alternativi
per queste proprietà di stile e ora possiamo anche aggiungere un padding qui diciamo 10 in modo da avere una certa spaziatura
tra il bordo e la parte reale in cui entriamo in qualcosa e direi che questo sembra già
molto meglio e noi può vedere chiaramente che qui abbiamo un input in cui gli utenti possono
inserire qualcosa.