In questa lezione, voglio approfondire un po 'di più il flexbox, soprattutto per quanto riguarda il modo in cui lo usi nelle app
React Native.
Se ne sai già tutto, puoi ovviamente saltare questa lezione.
Quindi, per questo, ho preparato una semplice applicazione fittizia e ovviamente la
trovi allegata, è una normale app React Native costruita con expo e nell'app. js file qui, quello che ho alla
fine è solo una vista con tre viste lì dove ogni vista ha quindi un testo con
testo uno, due, tre, questo crea semplicemente alcune
scatole con colori diversi - rosso, blu e verde e ora useremo flexbox per spostare queste scatole
in modo che tu possa avere un'idea di come funziona flexbox perché è così importante.
Ora prima
di tutto, per impostazione predefinita ogni vista in React Native, anche se non assegni stili
speciali utilizza flexbox e questo è diverso dal web, ad esempio, se hai un div che sarebbe
il tuo equivalente a un tipo di vista, non lo fa utilizzare flexbox per impostazione predefinita.
In React Native, lo fa, ogni visione di default organizza i propri figli con l'aiuto di questa cosa
flexbox, flexbox è semplicemente un termine, è semplicemente un concetto CSS che si occupa di organizzare elementi figlio in
uno spazio unidimensionale, quindi
qui ad esempio in una colonna. Questo è anche un altro valore
predefinito, non solo ogni vista utilizza di default la flexbox, ma, di default, organizza i bambini in una colonna, quindi
dall'alto verso il basso. Questa è anche una differenza per
il web e non voglio enfatizzare troppo queste differenze perché ovviamente non è necessario essere uno
sviluppatore web per creare app React Native ma penso che molte persone conoscano lo sviluppo web, no conoscere CSS
flexbox e quindi ha senso parlare anche delle differenze. Quindi nel web quando si utilizza flexbox, non
solo non è
attivato per impostazione predefinita, inoltre se lo
si attiva, il valore predefinito è organizzare tutti gli elementi figlio in una riga e qui, il
valore predefinito è organizzarli in un colonna.
Tuttavia, puoi modificare tale impostazione predefinita, quindi in questo caso nella vista che contiene le mie caselle, aggiungendo qui la
direzione flessibile e impostando questa su riga, ad esempio, ora vedrai che queste tre caselle sono organizzate in una riga
da sinistra a destra. Ora oltre a riga e
colonna, hai anche riga inversa e colonna inversa e
questo fa semplicemente ciò che implica il nome.
Ora abbiamo ancora una riga ma il primo elemento, il riquadro rosso in realtà è sulla destra e non più a sinistra,
quindi è anche qualcosa
che puoi fare, fammi tornare alla riga però. Quindi questa è la prima cosa che puoi fare.
Un'altra cosa importante di flexbox è la dimensione degli elementi figlio, qui ho dato ad
ogni elemento figlio una larghezza e un'altezza di 100.
Ora, se eliminassimo quella cosa di larghezza e altezza su ogni elemento figlio, vedrai che ora abbiamo una fila molto
piccola qui perché ogni scatola ora è larga solo quanto il suo figlio richiede che sia e alta
solo quanto suo figlio richiede che sia, quindi ogni
casella che contiene un numero è larga e alta quanto il numero che contiene.
Ora puoi cambiarlo anche con il contenitore flexbox circostante. Diciamo che una larghezza di diciamo 300
pixel o dell'80% della larghezza del genitore, quindi in
questo caso poiché è l'elemento radice, della larghezza del dispositivo e diamo un'altezza di
diciamo 300.
Se lo facciamo e ora è davvero importante, lo sto facendo nella vista che contiene tutte queste scatole,
non lo sto facendo sulle scatole stesse.
Quindi, se assegniamo questa larghezza e altezza sul riquadro circostante, vedi qualcosa di interessante,
l'altezza è assunta per tutti gli elementi,
ora tutte le viste nel flexbox prendono l'altezza del genitore, la larghezza non ha alcun impatto qui.
Questo è anche un comportamento predefinito che hai qui, ovviamente dal momento che non abbiamo cambiato nulla.
Il comportamento predefinito qui in effetti è che gli elementi figlio in un flexbox,
quindi in questa vista esterna qui, sono organizzati in modo tale da allinearsi lungo l'asse trasversale allungando.
Ok, c'erano molti termini, cosa significa? Ora, quando lavoriamo
con flexbox, abbiamo due assi importanti. L'asse principale dipende dalla tua direzione di flessione, per una riga che abbiamo qui,
riga di direzione di flessione, l'asse principale è da sinistra a destra. Per l'inverso della riga, sarebbe da destra a sinistra, per la colonna, sarebbe
dall'alto verso il basso e per l'inverso della colonna, sarebbe dal basso verso l'alto, quindi questo
è l'asse principale e quindi
hai anche un asse trasversale e questo è semplicemente l'opposto dell'asse principale.
Quindi, per una riga in cui l'asse principale è da sinistra a destra, l'asse trasversale sarebbe dall'alto verso il basso. Se l'asse principale è da destra a
sinistra, come nel caso della riga inversa, l'asse trasversale sarebbe dal basso
verso l'alto.
Va bene, quindi questo è l'asse principale e il concetto di asse trasversale.
Ora puoi organizzare gli elementi figlio, quindi in questa vista in cui sono presenti le tre caselle come
elementi figlio, puoi organizzare questi elementi figlio lungo questo asse. Si utilizza il contenuto giustificato per organizzare
gli elementi lungo l'asse principale e si hanno elementi di allineamento per organizzare gli elementi attorno all'asse trasversale.
Ora vedi i valori ottenuti per giustificare il contenuto qui se aggiungi queste virgolette
o se posizioni il cursore lì e premi lo spazio di controllo. Vedi che puoi centrare gli elementi, puoi
posizionarli alla fine o all'inizio di quel contenitore o puoi aggiungere un po 'di spazio in
mezzo, ad
esempio se usiamo lo spazio tra qui e usiamo il centro degli oggetti, allora le cose cambieranno.
Ora vedrai lì prendere la larghezza del contenitore circostante, ogni scatola stessa è ancora
piuttosto piccola ma sono divisi o sono distribuiti su tutta la larghezza del contenitore padre e
non stanno più prendendo l'altezza perché lungo la croce asse, li stiamo allineando con gli elementi di
allineamento e lì, ho impostato questo al centro.
Il valore predefinito qui è tratto e se lo ripristino per allungare, quindi non sorprende che si allungano
per l'intera altezza.
Ora se vuoi assicurarti che prendano la larghezza disponibile, non puoi impostare l'allungamento qui
giustificando il contenuto che è il tuo veicolo di posizionamento dell'asse principale, quindi non puoi impostare l'allungamento qui.
Quindi cosa puoi fare a riguardo?
Bene, questo è qualcosa che ora configuri su ogni elemento figlio stesso.
Puoi dire a un oggetto figlio quanto spazio dovrebbe togliere dallo spazio che potenzialmente sta ottenendo. L'allungamento qui è una specie di caso speciale,
lì lo imposti sull'elemento genitore, normalmente lo
imposti sull'elemento figlio.
Quindi, ad esempio, se ho impostato questo per centrare ora in modo che il genitore non
dica al bambino quanto spazio dovrebbe occupare, allora possiamo controllare completamente lo spazio che un bambino occupa andando allo stile
del bambino e lì, puoi aggiungere la flessibilità , la proprietà flex. La proprietà flex viene applicata agli elementi che si trovano all'interno di un
flexbox, quindi all'interno di una vista in
questo caso qui e che può essere una vista stessa ma che potrebbe anche essere un altro componente come
un testo, ad esempio.
Quindi ora qui, puoi aggiungere flex e puoi impostare questo valore su uno, ad
esempio, quindi flex deve essere un numero. Se lo imposti su uno, vedrai
che ora il contenitore rosso in cui ho impostato flex su 1 prende tutta la larghezza disponibile che può ottenere così tanto
da lasciare abbastanza spazio per il contenitore blu e verde in modo che può spremere il loro
contenuto nel flexbox circostante.
Ora non possiamo vedere i confini del contenitore circostante ma i confini sarebbero essenzialmente dove
inizia l'elemento rosso e l'elemento verde e così sull'asse orizzontale qui.
Quindi ora uno flessibile si assicura che l'oggetto rosso diventi il più grande possibile, quindi
occupa tutto lo spazio che può ottenere. Per impostazione predefinita, le viste occupano solo lo spazio richiesto
dai
loro elementi figlio, quindi come richiesto da questo unico carattere ma con uno flessibile, lo si cambia e ora occupano lo spazio
lungo l'asse principale, quindi
lungo la larghezza qui, come possono ottenere. Per l'asse trasversale, di nuovo questo
è un caso speciale, devi farlo sul genitore. Per l'asse principale e poiché abbiamo una
riga qui, l'asse principale è un asse orizzontale da sinistra a destra, lo
fai con la proprietà flex su un bambino.
Ora ovviamente puoi aggiungere flex anche ad altri elementi figlio, come quello secondo al contenitore blu
con i due
dentro, puoi aggiungere anche uno lì.
Quindi ora ne ho uno sul contenitore rosso e uno sul
contenitore blu e quello che succede adesso è che entrambi occupano lo spazio libero disponibile e tra queste due
caselle, lo spazio è distribuito uniformemente ed è ciò che questo numero indica qui.
Questo numero è un numero
relativo, tutti gli elementi nella stessa flexbox, con la proprietà flex distribuire lo spazio disponibile considerando il numero
che si assegna qui e questi numeri sono l'uno rispetto all'altro.
Quindi, se do una flessione del contenitore blu due qui, allora ciò significa che dello spazio disponibile che
hai in quel contenitore circostante, dopo aver dedotto lo spazio di cui ogni elemento ha bisogno per
comprimerne
il contenuto, il contenitore blu occuperà il doppio dello spazio che questo perché qui ne
abbiamo uno flessibile,
qui ne abbiamo due, se qui ne avessimo tre, questo richiederebbe tre quinti dello spazio libero disponibile perché ne
abbiamo tre più due,
quindi abbiamo 5 segmenti disponibili per così dire e qui il contenitore rosso richiederebbe 3 segmenti, il
contenitore blu prenderebbe 2 segmenti.
Se abbiamo 1 e 2, allora abbiamo tre segmenti disponibili e il contenitore blu ne
prende due, il rosso ne prende uno, quindi aggiungi sempre questi numeri flessibili e poi distribuisci o questo è
fatto automaticamente, ma lo spazio disponibile viene distribuito di conseguenza.
Quindi ora qui, vedremo che il contenitore blu è due volte più grande di quello rosso o occupa
il doppio dello spazio libero di quello rosso.
Quindi è così che puoi lavorare
con il flex, puoi organizzare il modo in cui gli oggetti sono posizionati con la direzione del flex, con contenuti giustificati
e allineare gli oggetti e puoi anche far crescere e restringere gli oggetti con l'aiuto del flex.
Quindi ora questa è una breve introduzione al flexbox in React Native, come ho
detto ispirato da Flexbox per CSS, quindi se lo sapevi, tutto ciò che ho spiegato qui probabilmente non è
nuovo per te.
Lavoreremo con Flexbox durante questo corso,
quindi le cose diventeranno anche più chiare e lavoreremo molto con esso e vedrai
come puoi creare bellissime interfacce utente con Flexbox, alla fine Flexbox è lo strumento di React Nativo per strutturare i tuoi
contenuti su una pagina, per organizzare i tuoi contenuti e in genere lavorerai con molte visualizzazioni che puoi
anche annidare l'una nell'altra in modo da poter posizionare gli elementi nel modo che desideri
a causa ovviamente ed
è anche importante, non devi devi solo avere una vista nella tua app che usa flexbox,
potresti avere un'altra vista lì che usa anche flexbox e in realtà, come ho
già detto, ogni vista di default usa flexbox e puoi quindi annidare queste viste l'una nell'altra in modo
che posizioni tutto come desideri e lo vedrai anche in questo
modulo già e in realtà, lo sto già facendo qui. Nelle mie viste qui che sono nella vista circostante, quindi
le mie caselle qui, lì uso anche giustificare il contenuto e allineare gli elementi per centrare i miei numeri in queste
caselle, in modo che 1, 2 e 3 siano centrati lì in orizzontale e in verticale e che funzioni perché
abbiamo flexbox attivato per impostazione predefinita e non possiamo disattivarlo a proposito e quindi, utilizzo queste due proprietà qui per allineare
il mio contenuto di questa vista lungo l'asse principale e trasversale e qui poiché non ho impostato alcun flex speciale direzione per questa vista, l'asse
principale è dall'alto verso il basso perché la direzione di flessione predefinita è la colonna e l'asse trasversale
è da sinistra a destra.
Questa è solo una nota a margine.