A volte, tuttavia, non puoi semplicemente ottenere il
layout giusto con larghezza percentuale e pixel codificati in questo modo, a volte devi davvero sapere
quanti pixel hai
a disposizione, ad esempio qui sui pulsanti in cui impostiamo una larghezza di 100, impostiamo 100
indipendentemente dalle dimensioni del dispositivo.
Ora in realtà, sappiamo che vogliamo avere due pulsanti uno accanto all'altro.
Quindi ciò che possiamo fare è semplicemente assicurarci di prendere una larghezza del pulsante che si adatti sempre allo schermo, non
importa quanto sia piccolo
e per questo, dobbiamo scoprire quanti pixel abbiamo disponibili in larghezza e questo è qualcosa che
possiamo scoprilo con l'aiuto di React Native. Lì da React Native,
qui puoi importare l'oggetto dimensioni, dimensioni è il nome.
Ora questo non è un componente che usi, ma questo è un oggetto che ti consente di
scoprire quanta larghezza hai a disposizione.
Ora possiamo usarlo per esempio laggiù dove impostiamo la nostra larghezza del pulsante, invece di impostarla in
questo modo, possiamo impostare la nostra
larghezza sulle dimensioni e quindi c'è un metodo get in cui puoi ottenere le dimensioni della finestra.
Puoi anche ottenerlo dallo
schermo, la differenza tra finestra e schermo conta solo su Android dove con finestra, l'altezza della barra di stato sarà esclusa
dal calcolo e quindi questa
sarà davvero, bene la parte dello schermo
in cui i tuoi contenuti saranno vivere dentro.
Quindi in genere dovresti usare la finestra qui perché su iOS
non importa, su Android è garantito per essere la parte dello schermo in cui l'interfaccia utente si trova davvero senza quella barra
di stato in alto.
Quindi, in genere, potresti voler utilizzare la finestra qui per ottenere la stanza reale che hai a disposizione per il tuo layout,
le dimensioni reali che puoi utilizzare per il tuo layout. Ora ciò che ti dà è un oggetto in cui
puoi ottenere un paio di proprietà, quattro per essere precisi: la scala
dei caratteri impostata dall'utente, quindi ad esempio se gli utenti vogliono avere caratteri più grandi, allora
puoi ottenere il moltiplicatore qui con scala
dei caratteri, ma soprattutto, ottieni la larghezza e l'altezza e se otteniamo la larghezza qui, allora otteniamo la larghezza
complessiva del dispositivo
su cui gira questa app.
Ora sappiamo che vogliamo spremere almeno due pulsanti in questo dispositivo qui, quindi potremmo semplicemente
dividerlo per due, quindi ora ogni pulsante è largo la metà del dispositivo.
Ora se lo salviamo, non otteniamo davvero l'aspetto che vogliamo perché, ovviamente, è
troppo grande, ma se lo dividiamo per tre, ad esempio, questo sembra già migliore sul piccolo
schermo, non su
quello grande, ma che ne dici di quattro? Se ne prendiamo quattro, allora abbiamo un sacco di spazio
per tutto l'altro spazio di cui abbiamo bisogno come la spaziatura attorno al nostro contenitore e assicuriamo che i nostri pulsanti rispettino sempre le dimensioni del dispositivo.
Ora ovviamente qui, avresti potuto ottenere qualcosa di simile impostando la larghezza su una percentuale, come
il 40% qui, ma volevo anche introdurre qui l'API delle dimensioni che utilizzeremo anche
in seguito.
È un'ottima API per scoprire quanti pixel hai a disposizione sulla larghezza e sull'altezza sul dispositivo o in
esecuzione e questo
è importante, dove la percentuale qui si riferisce sempre alla vista padre diretta e non sempre alla larghezza disponibile del
dispositivo , questo è solo
il caso del genitore più in alto, per così dire,
quindi nella vista più in alto che stai eseguendo il rendering. Dimensioni finestra get ti dà sempre le dimensioni per l'intero
dispositivo, indipendentemente da dove lo usi.
Quindi la larghezza qui è sempre la larghezza del nostro schermo sul dispositivo e mai del genitore o altro.
Quindi questo può essere davvero utile se vuoi modellare qualcosa in un certo modo o
ridimensionare qualcosa in un certo modo perché ti dice quanta larghezza hai a disposizione.