Quindi abbiamo iniziato con l'inserimento del testo, in questo momento non stiamo facendo nulla con i valori immessi dall'utente ma
prima di farlo, assicuriamoci che il pulsante non sia al di sotto di quell'input ma accanto a quello
a destra e per
ancora una volta, dobbiamo lavorare sul layout.
Ecco perché ho questa vista in più qui intorno all'immissione di testo nel pulsante.
Non avremmo bisogno di questo, ma ora con quella vista nidificata, possiamo controllare come questi due
elementi sono allineati tra loro, aggiungendo di nuovo la proprietà
dello stile qui e ora per il layout, per posizionare le cose, React Native usa la flexbox che potresti anche sai
dal web, in caso contrario, in allegato troverai risorse che ti faranno iniziare con il flexbox CSS.
Non è necessario conoscere il flexbox dentro e fuori, ma aiuta a conoscerlo un
po ', il flexbox funziona in modo tale da posizionare gli elementi all'interno di una vista uno accanto all'altro o uno
sopra l'altro, per impostazione predefinita uno sopra l'altro in React
Native e puoi cambiarlo impostando la direzione flessibile dalla colonna che è l'impostazione predefinita per la riga e aggiungendo
semplicemente questa, in questa vista, sostituiamo l'impostazione predefinita che è l'impostazione predefinita, motivo per cui non è necessario
disattivarla dalla colonna e ora già , vedremo che il pulsante nell'input di testo si trova uno accanto
all'altro, non
sembra ancora così bello ma sono seduti uno accanto all'altro. Ora, per migliorare l'aspetto, possiamo anche aggiungere
altro, ad esempio
puoi definire come allineare e distribuire le cose nella loro riga o colonna.
Ad esempio, con un contenuto giustificato, puoi controllare il modo in cui gli elementi sono distribuiti lungo il loro asse
principale e con la riga, l'asse principale è da
sinistra a destra, se quello sarebbe colonna, l'asse principale sarebbe dall'alto verso il basso.
Quindi ora potremmo specificare un valore e qui il mio IDE mi dà anche il completamento automatico che è molto conveniente,
potremmo specificare un valore di spazio tra ad esempio. Ciò significa che tutto lo spazio libero rimanente è tra
i due elementi, quindi ora non sono
seduti uno accanto all'altro, ma invece c'è uno spazio libero tra loro come
puoi dire.
Ora possiamo anche allinearli sul loro asse
trasversale, quindi l'asse principale per la riga di direzione flessibile era da sinistra a
destra, quindi l'asse trasversale è dall'alto verso il basso. Per la colonna di direzione flessibile, l'asse principale sarebbe dall'alto verso il basso e l'asse
trasversale sarebbe da sinistra
a destra, quindi l'asse trasversale è semplicemente l'opposto dell'asse principale, per così dire. Giustifica le posizioni dei contenuti lungo l'asse
principale, con gli elementi di allineamento puoi controllare come gli elementi figlio di questa vista sono allineati lungo l'asse
trasversale e lì hai valori diversi, come ad esempio il centro.
Quindi, in questo caso, poiché abbiamo una riga di direzione flessibile, questo dovrebbe centrare verticalmente tutti gli elementi, il che significa che il pulsante ora
sembra più bello ed è semplicemente centrato lì nel mezzo di questo input. Bene e ora possiamo anche aumentare leggermente la
larghezza di quell'input andando all'input di testo e lì sullo stile, possiamo
anche aggiungere una larghezza di diciamo 200, per dare a questa una larghezza di 200 pixel, il che
significa che questo ora è un po 'più grande. In alternativa, avresti potuto anche scegliere un valore
percentuale come 80%, il che significa che ciò prende l'80% della larghezza disponibile resa disponibile dal
suo componente padre, quindi dalla vista che lo circonda. E ora, con quello, abbiamo dato un'occhiata ai primi importanti fondamenti,
sul layout delle cose in React Native e sullo styling delle cose, ma in questo momento, stiamo facendo tutto
questo con quel concetto chiamato stili in linea, il che significa che stiamo installando gli stili direttamente sugli elementi e
non è l'ideale.