1 00:00:02,230 --> 00:00:08,100 In questa lezione, voglio approfondire un po 'di più il flexbox, soprattutto per quanto riguarda il modo in cui lo usi nelle app 2 00:00:08,110 --> 00:00:08,690 React Native. 3 00:00:08,710 --> 00:00:12,310 Se ne sai già tutto, puoi ovviamente saltare questa lezione. 4 00:00:12,340 --> 00:00:14,920 Quindi, per questo, ho preparato una semplice applicazione fittizia e ovviamente la 5 00:00:14,920 --> 00:00:20,420 trovi allegata, è una normale app React Native costruita con expo e nell'app. js file qui, quello che ho alla 6 00:00:20,460 --> 00:00:26,890 fine è solo una vista con tre viste lì dove ogni vista ha quindi un testo con 7 00:00:26,890 --> 00:00:29,990 testo uno, due, tre, questo crea semplicemente alcune 8 00:00:30,010 --> 00:00:36,310 scatole con colori diversi - rosso, blu e verde e ora useremo flexbox per spostare queste scatole 9 00:00:36,310 --> 00:00:41,950 in modo che tu possa avere un'idea di come funziona flexbox perché è così importante. 10 00:00:42,240 --> 00:00:43,240 Ora prima 11 00:00:43,660 --> 00:00:49,120 di tutto, per impostazione predefinita ogni vista in React Native, anche se non assegni stili 12 00:00:49,120 --> 00:00:55,410 speciali utilizza flexbox e questo è diverso dal web, ad esempio, se hai un div che sarebbe 13 00:00:55,420 --> 00:01:01,370 il tuo equivalente a un tipo di vista, non lo fa utilizzare flexbox per impostazione predefinita. 14 00:01:01,450 --> 00:01:08,260 In React Native, lo fa, ogni visione di default organizza i propri figli con l'aiuto di questa cosa 15 00:01:08,350 --> 00:01:15,490 flexbox, flexbox è semplicemente un termine, è semplicemente un concetto CSS che si occupa di organizzare elementi figlio in 16 00:01:15,520 --> 00:01:17,440 uno spazio unidimensionale, quindi 17 00:01:17,440 --> 00:01:21,990 qui ad esempio in una colonna. Questo è anche un altro valore 18 00:01:21,990 --> 00:01:29,340 predefinito, non solo ogni vista utilizza di default la flexbox, ma, di default, organizza i bambini in una colonna, quindi 19 00:01:29,340 --> 00:01:33,020 dall'alto verso il basso. Questa è anche una differenza per 20 00:01:33,020 --> 00:01:37,350 il web e non voglio enfatizzare troppo queste differenze perché ovviamente non è necessario essere uno 21 00:01:37,350 --> 00:01:42,400 sviluppatore web per creare app React Native ma penso che molte persone conoscano lo sviluppo web, no conoscere CSS 22 00:01:42,400 --> 00:01:47,400 flexbox e quindi ha senso parlare anche delle differenze. Quindi nel web quando si utilizza flexbox, non 23 00:01:47,400 --> 00:01:48,840 solo non è 24 00:01:48,840 --> 00:01:51,220 attivato per impostazione predefinita, inoltre se lo 25 00:01:51,240 --> 00:01:56,820 si attiva, il valore predefinito è organizzare tutti gli elementi figlio in una riga e qui, il 26 00:01:56,820 --> 00:01:59,010 valore predefinito è organizzarli in un colonna. 27 00:01:59,010 --> 00:02:05,910 Tuttavia, puoi modificare tale impostazione predefinita, quindi in questo caso nella vista che contiene le mie caselle, aggiungendo qui la 28 00:02:05,910 --> 00:02:12,960 direzione flessibile e impostando questa su riga, ad esempio, ora vedrai che queste tre caselle sono organizzate in una riga 29 00:02:12,960 --> 00:02:16,560 da sinistra a destra. Ora oltre a riga e 30 00:02:16,560 --> 00:02:19,250 colonna, hai anche riga inversa e colonna inversa e 31 00:02:19,260 --> 00:02:21,720 questo fa semplicemente ciò che implica il nome. 32 00:02:21,720 --> 00:02:29,010 Ora abbiamo ancora una riga ma il primo elemento, il riquadro rosso in realtà è sulla destra e non più a sinistra, 33 00:02:29,010 --> 00:02:30,820 quindi è anche qualcosa 34 00:02:30,840 --> 00:02:36,210 che puoi fare, fammi tornare alla riga però. Quindi questa è la prima cosa che puoi fare. 35 00:02:36,210 --> 00:02:42,750 Un'altra cosa importante di flexbox è la dimensione degli elementi figlio, qui ho dato ad 36 00:02:42,810 --> 00:02:47,040 ogni elemento figlio una larghezza e un'altezza di 100. 37 00:02:47,070 --> 00:02:54,660 Ora, se eliminassimo quella cosa di larghezza e altezza su ogni elemento figlio, vedrai che ora abbiamo una fila molto 38 00:02:54,660 --> 00:03:01,890 piccola qui perché ogni scatola ora è larga solo quanto il suo figlio richiede che sia e alta 39 00:03:01,890 --> 00:03:05,700 solo quanto suo figlio richiede che sia, quindi ogni 40 00:03:05,700 --> 00:03:11,180 casella che contiene un numero è larga e alta quanto il numero che contiene. 41 00:03:11,340 --> 00:03:18,180 Ora puoi cambiarlo anche con il contenitore flexbox circostante. Diciamo che una larghezza di diciamo 300 42 00:03:18,330 --> 00:03:22,740 pixel o dell'80% della larghezza del genitore, quindi in 43 00:03:22,740 --> 00:03:28,950 questo caso poiché è l'elemento radice, della larghezza del dispositivo e diamo un'altezza di 44 00:03:29,020 --> 00:03:30,230 diciamo 300. 45 00:03:30,480 --> 00:03:36,720 Se lo facciamo e ora è davvero importante, lo sto facendo nella vista che contiene tutte queste scatole, 46 00:03:36,720 --> 00:03:39,380 non lo sto facendo sulle scatole stesse. 47 00:03:39,480 --> 00:03:45,050 Quindi, se assegniamo questa larghezza e altezza sul riquadro circostante, vedi qualcosa di interessante, 48 00:03:45,150 --> 00:03:48,250 l'altezza è assunta per tutti gli elementi, 49 00:03:48,270 --> 00:03:54,810 ora tutte le viste nel flexbox prendono l'altezza del genitore, la larghezza non ha alcun impatto qui. 50 00:03:54,870 --> 00:03:59,510 Questo è anche un comportamento predefinito che hai qui, ovviamente dal momento che non abbiamo cambiato nulla. 51 00:03:59,760 --> 00:04:06,840 Il comportamento predefinito qui in effetti è che gli elementi figlio in un flexbox, 52 00:04:06,850 --> 00:04:15,360 quindi in questa vista esterna qui, sono organizzati in modo tale da allinearsi lungo l'asse trasversale allungando. 53 00:04:15,490 --> 00:04:20,510 Ok, c'erano molti termini, cosa significa? Ora, quando lavoriamo 54 00:04:20,530 --> 00:04:29,290 con flexbox, abbiamo due assi importanti. L'asse principale dipende dalla tua direzione di flessione, per una riga che abbiamo qui, 55 00:04:29,350 --> 00:04:37,690 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 56 00:04:37,690 --> 00:04:42,570 dall'alto verso il basso e per l'inverso della colonna, sarebbe dal basso verso l'alto, quindi questo 57 00:04:42,580 --> 00:04:44,270 è l'asse principale e quindi 58 00:04:44,620 --> 00:04:48,630 hai anche un asse trasversale e questo è semplicemente l'opposto dell'asse principale. 59 00:04:48,640 --> 00:04:56,110 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 60 00:04:56,110 --> 00:05:01,900 sinistra, come nel caso della riga inversa, l'asse trasversale sarebbe dal basso 61 00:05:01,900 --> 00:05:03,100 verso l'alto. 62 00:05:03,340 --> 00:05:06,940 Va bene, quindi questo è l'asse principale e il concetto di asse trasversale. 63 00:05:06,940 --> 00:05:13,060 Ora puoi organizzare gli elementi figlio, quindi in questa vista in cui sono presenti le tre caselle come 64 00:05:13,360 --> 00:05:20,170 elementi figlio, puoi organizzare questi elementi figlio lungo questo asse. Si utilizza il contenuto giustificato per organizzare 65 00:05:20,200 --> 00:05:27,760 gli elementi lungo l'asse principale e si hanno elementi di allineamento per organizzare gli elementi attorno all'asse trasversale. 66 00:05:27,760 --> 00:05:31,040 Ora vedi i valori ottenuti per giustificare il contenuto qui se aggiungi queste virgolette 67 00:05:31,090 --> 00:05:37,230 o se posizioni il cursore lì e premi lo spazio di controllo. Vedi che puoi centrare gli elementi, puoi 68 00:05:37,230 --> 00:05:44,040 posizionarli alla fine o all'inizio di quel contenitore o puoi aggiungere un po 'di spazio in 69 00:05:44,040 --> 00:05:45,270 mezzo, ad 70 00:05:45,300 --> 00:05:52,500 esempio se usiamo lo spazio tra qui e usiamo il centro degli oggetti, allora le cose cambieranno. 71 00:05:52,500 --> 00:05:57,490 Ora vedrai lì prendere la larghezza del contenitore circostante, ogni scatola stessa è ancora 72 00:05:57,540 --> 00:06:03,360 piuttosto piccola ma sono divisi o sono distribuiti su tutta la larghezza del contenitore padre e 73 00:06:03,360 --> 00:06:09,570 non stanno più prendendo l'altezza perché lungo la croce asse, li stiamo allineando con gli elementi di 74 00:06:09,570 --> 00:06:12,960 allineamento e lì, ho impostato questo al centro. 75 00:06:13,020 --> 00:06:19,620 Il valore predefinito qui è tratto e se lo ripristino per allungare, quindi non sorprende che si allungano 76 00:06:19,620 --> 00:06:20,960 per l'intera altezza. 77 00:06:20,970 --> 00:06:26,490 Ora se vuoi assicurarti che prendano la larghezza disponibile, non puoi impostare l'allungamento qui 78 00:06:26,490 --> 00:06:32,820 giustificando il contenuto che è il tuo veicolo di posizionamento dell'asse principale, quindi non puoi impostare l'allungamento qui. 79 00:06:32,980 --> 00:06:35,880 Quindi cosa puoi fare a riguardo? 80 00:06:35,890 --> 00:06:40,780 Bene, questo è qualcosa che ora configuri su ogni elemento figlio stesso. 81 00:06:40,810 --> 00:06:50,290 Puoi dire a un oggetto figlio quanto spazio dovrebbe togliere dallo spazio che potenzialmente sta ottenendo. L'allungamento qui è una specie di caso speciale, 82 00:06:50,290 --> 00:06:54,220 lì lo imposti sull'elemento genitore, normalmente lo 83 00:06:54,220 --> 00:06:56,640 imposti sull'elemento figlio. 84 00:06:56,680 --> 00:07:02,200 Quindi, ad esempio, se ho impostato questo per centrare ora in modo che il genitore non 85 00:07:02,200 --> 00:07:08,950 dica al bambino quanto spazio dovrebbe occupare, allora possiamo controllare completamente lo spazio che un bambino occupa andando allo stile 86 00:07:08,950 --> 00:07:17,410 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 87 00:07:17,410 --> 00:07:19,730 flexbox, quindi all'interno di una vista in 88 00:07:19,810 --> 00:07:25,660 questo caso qui e che può essere una vista stessa ma che potrebbe anche essere un altro componente come 89 00:07:25,660 --> 00:07:27,150 un testo, ad esempio. 90 00:07:27,160 --> 00:07:31,320 Quindi ora qui, puoi aggiungere flex e puoi impostare questo valore su uno, ad 91 00:07:31,330 --> 00:07:35,940 esempio, quindi flex deve essere un numero. Se lo imposti su uno, vedrai 92 00:07:35,950 --> 00:07:44,050 che ora il contenitore rosso in cui ho impostato flex su 1 prende tutta la larghezza disponibile che può ottenere così tanto 93 00:07:44,110 --> 00:07:50,440 da lasciare abbastanza spazio per il contenitore blu e verde in modo che può spremere il loro 94 00:07:50,620 --> 00:07:52,470 contenuto nel flexbox circostante. 95 00:07:52,480 --> 00:07:58,360 Ora non possiamo vedere i confini del contenitore circostante ma i confini sarebbero essenzialmente dove 96 00:07:58,600 --> 00:08:03,060 inizia l'elemento rosso e l'elemento verde e così sull'asse orizzontale qui. 97 00:08:04,720 --> 00:08:11,020 Quindi ora uno flessibile si assicura che l'oggetto rosso diventi il più grande possibile, quindi 98 00:08:11,170 --> 00:08:17,140 occupa tutto lo spazio che può ottenere. Per impostazione predefinita, le viste occupano solo lo spazio richiesto 99 00:08:17,140 --> 00:08:17,690 dai 100 00:08:17,710 --> 00:08:24,040 loro elementi figlio, quindi come richiesto da questo unico carattere ma con uno flessibile, lo si cambia e ora occupano lo spazio 101 00:08:24,040 --> 00:08:25,140 lungo l'asse principale, quindi 102 00:08:25,150 --> 00:08:29,140 lungo la larghezza qui, come possono ottenere. Per l'asse trasversale, di nuovo questo 103 00:08:29,140 --> 00:08:34,310 è un caso speciale, devi farlo sul genitore. Per l'asse principale e poiché abbiamo una 104 00:08:34,360 --> 00:08:38,790 riga qui, l'asse principale è un asse orizzontale da sinistra a destra, lo 105 00:08:38,800 --> 00:08:41,520 fai con la proprietà flex su un bambino. 106 00:08:42,700 --> 00:08:48,550 Ora ovviamente puoi aggiungere flex anche ad altri elementi figlio, come quello secondo al contenitore blu 107 00:08:48,550 --> 00:08:50,260 con i due 108 00:08:50,260 --> 00:08:52,420 dentro, puoi aggiungere anche uno lì. 109 00:08:52,420 --> 00:08:56,690 Quindi ora ne ho uno sul contenitore rosso e uno sul 110 00:08:56,710 --> 00:09:03,790 contenitore blu e quello che succede adesso è che entrambi occupano lo spazio libero disponibile e tra queste due 111 00:09:03,790 --> 00:09:08,870 caselle, lo spazio è distribuito uniformemente ed è ciò che questo numero indica qui. 112 00:09:08,930 --> 00:09:11,210 Questo numero è un numero 113 00:09:11,210 --> 00:09:18,350 relativo, tutti gli elementi nella stessa flexbox, con la proprietà flex distribuire lo spazio disponibile considerando il numero 114 00:09:18,410 --> 00:09:23,130 che si assegna qui e questi numeri sono l'uno rispetto all'altro. 115 00:09:23,140 --> 00:09:29,800 Quindi, se do una flessione del contenitore blu due qui, allora ciò significa che dello spazio disponibile che 116 00:09:29,950 --> 00:09:36,100 hai in quel contenitore circostante, dopo aver dedotto lo spazio di cui ogni elemento ha bisogno per 117 00:09:36,100 --> 00:09:36,840 comprimerne 118 00:09:36,970 --> 00:09:42,480 il contenuto, il contenitore blu occuperà il doppio dello spazio che questo perché qui ne 119 00:09:42,490 --> 00:09:43,760 abbiamo uno flessibile, 120 00:09:43,810 --> 00:09:50,560 qui ne abbiamo due, se qui ne avessimo tre, questo richiederebbe tre quinti dello spazio libero disponibile perché ne 121 00:09:50,560 --> 00:09:52,150 abbiamo tre più due, 122 00:09:52,210 --> 00:09:58,300 quindi abbiamo 5 segmenti disponibili per così dire e qui il contenitore rosso richiederebbe 3 segmenti, il 123 00:09:58,300 --> 00:09:59,950 contenitore blu prenderebbe 2 segmenti. 124 00:09:59,950 --> 00:10:05,950 Se abbiamo 1 e 2, allora abbiamo tre segmenti disponibili e il contenitore blu ne 125 00:10:06,070 --> 00:10:13,510 prende due, il rosso ne prende uno, quindi aggiungi sempre questi numeri flessibili e poi distribuisci o questo è 126 00:10:13,510 --> 00:10:17,680 fatto automaticamente, ma lo spazio disponibile viene distribuito di conseguenza. 127 00:10:17,680 --> 00:10:22,660 Quindi ora qui, vedremo che il contenitore blu è due volte più grande di quello rosso o occupa 128 00:10:22,660 --> 00:10:25,090 il doppio dello spazio libero di quello rosso. 129 00:10:25,090 --> 00:10:27,090 Quindi è così che puoi lavorare 130 00:10:27,130 --> 00:10:33,760 con il flex, puoi organizzare il modo in cui gli oggetti sono posizionati con la direzione del flex, con contenuti giustificati 131 00:10:33,790 --> 00:10:39,370 e allineare gli oggetti e puoi anche far crescere e restringere gli oggetti con l'aiuto del flex. 132 00:10:39,430 --> 00:10:44,490 Quindi ora questa è una breve introduzione al flexbox in React Native, come ho 133 00:10:44,560 --> 00:10:51,070 detto ispirato da Flexbox per CSS, quindi se lo sapevi, tutto ciò che ho spiegato qui probabilmente non è 134 00:10:51,070 --> 00:10:52,280 nuovo per te. 135 00:10:52,450 --> 00:10:54,610 Lavoreremo con Flexbox durante questo corso, 136 00:10:54,610 --> 00:10:58,900 quindi le cose diventeranno anche più chiare e lavoreremo molto con esso e vedrai 137 00:10:58,930 --> 00:11:05,170 come puoi creare bellissime interfacce utente con Flexbox, alla fine Flexbox è lo strumento di React Nativo per strutturare i tuoi 138 00:11:05,170 --> 00:11:10,570 contenuti su una pagina, per organizzare i tuoi contenuti e in genere lavorerai con molte visualizzazioni che puoi 139 00:11:10,570 --> 00:11:15,190 anche annidare l'una nell'altra in modo da poter posizionare gli elementi nel modo che desideri 140 00:11:15,190 --> 00:11:16,720 a causa ovviamente ed 141 00:11:16,840 --> 00:11:21,680 è anche importante, non devi devi solo avere una vista nella tua app che usa flexbox, 142 00:11:21,730 --> 00:11:26,050 potresti avere un'altra vista lì che usa anche flexbox e in realtà, come ho 143 00:11:26,050 --> 00:11:31,570 già detto, ogni vista di default usa flexbox e puoi quindi annidare queste viste l'una nell'altra in modo 144 00:11:31,600 --> 00:11:35,070 che posizioni tutto come desideri e lo vedrai anche in questo 145 00:11:35,140 --> 00:11:41,200 modulo già e in realtà, lo sto già facendo qui. Nelle mie viste qui che sono nella vista circostante, quindi 146 00:11:41,200 --> 00:11:47,710 le mie caselle qui, lì uso anche giustificare il contenuto e allineare gli elementi per centrare i miei numeri in queste 147 00:11:47,710 --> 00:11:54,070 caselle, in modo che 1, 2 e 3 siano centrati lì in orizzontale e in verticale e che funzioni perché 148 00:11:54,070 --> 00:12:00,700 abbiamo flexbox attivato per impostazione predefinita e non possiamo disattivarlo a proposito e quindi, utilizzo queste due proprietà qui per allineare 149 00:12:00,700 --> 00:12:08,320 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 150 00:12:08,320 --> 00:12:14,170 principale è dall'alto verso il basso perché la direzione di flessione predefinita è la colonna e l'asse trasversale 151 00:12:14,530 --> 00:12:16,420 è da sinistra a destra. 152 00:12:16,420 --> 00:12:17,440 Questa è solo una nota a margine.