Ora questa è anche una buona pratica
per te, puoi mettere in pausa il video qui e provare a posizionare questi due pulsanti uno accanto all'altro
da solo, solo i due pulsanti, non l'ingresso e i due pulsanti, ma questi due pulsanti dovrebbero essere in un nuova riga
sotto l'ingresso ma poi sedersi l'una accanto all'altra.
Dopo la breve pausa che puoi utilizzare per mettere in pausa il video, ovviamente lo faremo insieme.
Quindi hai avuto successo?
Proviamolo insieme.
La chiave qui è usare flexbox e un'altra vista perché, come ho già detto in precedenza e, come è davvero importante capire,
visualizzare i componenti è il componente principale per l'organizzazione di altri componenti o per essere utilizzato come contenitore che è
possibile anche definire come stile,
ma qui in questo caso, per organizzare altri componenti. Quindi sposterò i due pulsanti all'interno di quella
vista e ora possiamo assegnare uno stile a quella vista e quello stile ovviamente sarà
definito qui nel nostro oggetto stile e chiamerò questo contenitore
di pulsanti, dipende da te, questo nome e lì dentro, voglio impostare una direzione flessibile della riga
per farli sedere uno accanto all'altro e quindi, imposterò giustificare il contenuto dello spazio tra per avere lo
spazio libero tra i due pulsanti.
Ora aggiungiamo lo stile qui a quella vista, il contenitore dei pulsanti degli stili e salviamo questo e ora ecco i
pulsanti ma avere lo spazio libero ha un effetto qui, che sarà ancora più chiaro su Android, che
al momento non ha alcun
effetto, in modo che lo spazio tra
non abbia alcun effetto, lasciatemelo mostrare rapidamente su Android.
Vedi,
non c'è spazio libero.
Il motivo è semplicemente che non abbiamo alcuna larghezza assegnata al nostro contenitore di pulsanti
e
quindi, come hai appreso, prende solo la
larghezza dei bambini e che è semplicemente la larghezza
dei due pulsanti
aggiunti insieme, quindi non c'è spazio libero per aggiungere tra.
Quindi abbiamo un po 'di spazio libero in mezzo, dobbiamo semplicemente assegnare un con al contenitore dei pulsanti
e ora quella larghezza dipende ovviamente da te. Dato che l'input ha l'80%,
potremmo andare anche qui con l'80% o forse con il 60% per renderlo un po 'più stretto dell'input sopra, in
modo che i pulsanti non si trovino sui bordi dell'input ma ovviamente a
te
e quindi ora con questo se questo si ricarica e lo guardiamo su Android
usando questo comodo modo di chiuderlo e riavviarlo, ora dovremmo vedere un po 'di spazio
libero tra questi due
pulsanti, sì, sta bene.
E ovviamente puoi giocare con quello,
puoi anche in alternativa aggiungere stili ai pulsanti, puoi anche aggiungere
oggetti di stile qui e aggiungere un margine a sinistra e a destra di ciascun pulsante, che avrebbe
funzionato anche.
Puoi anche giocare con altri valori qui, come lo spazio intorno per avere lo spazio libero a sinistra e a destra
dei pulsanti e non solo tra di loro.
Queste sono tutte cose che puoi fare, andrò con lo spazio qui intorno e darò un'ultima occhiata a
questo, ma alla fine è ovviamente semplicemente qualcosa che dipende da te.
Importante qui è ovviamente che tu capisca come puoi ottenere qualcosa con l'aiuto di una vista
che avvolgi i tuoi pulsanti e la tua flexbox quindi e
con ciò, direi che qui abbiamo un aspetto decente.
Ora un'ultima cosa, davvero l'ultima cosa che ora voglio ancora fare è ridimensionare questi pulsanti perché non sono ugualmente dimensionati e
penso che sembrerebbe un po 'più bello se avessero le stesse dimensioni.
Ora su un pulsante, non puoi aggiungere un puntello di stile e impostare una larghezza, non importa se stai
usando stili incorporati o l'oggetto foglio
di stile, ed è qualcosa che devi sapere che è
il motivo per cui lo sto coprendo qui, devi avvolgere il tuo pulsante in una vista separata, come se lo facessi qui
e quindi dare a quella vista un pulsante, ad esempio qui potremmo aggiungere un pulsante stili, facendo riferimento a una proprietà
pulsante laggiù, a ciascuna vista e lì su questo proprietà del pulsante che sto aggiungendo ora, potresti aggiungere una
larghezza di diciamo 40% e che sarà il
40% del genitore di quella vista, quindi il 40% di quella vista contenitore pulsante che a sua volta occupa
il 60% dell'intera larghezza disponibile e possiamo farlo anche sull'altro pulsante, ovviamente.
Quindi è solo qualcosa che devi sapere se aggiungi le viste circostanti qui, attorno ai tuoi pulsanti.
Ora con questo se riavviamo di nuovo Android, dovremmo avere pulsanti di uguali dimensioni che ovviamente
sono qualcosa che desideri.
Ovviamente avresti potuto usare un valore in pixel qui invece di valori percentuali, ma ora con quello, sono davvero
felice, penso che
ora sia davvero un'app che sta bene, si comporta bene e
sì, è un buon inizio con React Native.
Ora, ovviamente, c'è molto di più che possiamo imparare e in cui ci immergeremo, molto di più che possiamo fare
per quanto riguarda lo stile perché, come già accennato, questa non è certamente l'app più bella che tu abbia
mai costruito, ma abbiamo coperto molti fondamentali fondamentali Qui.