Sin embargo, a veces, simplemente no puede obtener
el diseño correcto con un ancho porcentual y píxeles codificados de esta manera, a veces realmente necesita
saber cuántos píxeles
tiene disponibles, por ejemplo aquí en los botones donde establecemos un ancho de 100, establecemos 100 sin
importar el tamaño del dispositivo.
Ahora, en realidad, sabemos que queremos tener dos botones uno al lado del otro.
Entonces, lo que podemos hacer es simplemente asegurarnos de tomar un ancho de botón que siempre se ajuste a la pantalla, sin
importar cuán pequeño sea y
para eso, necesitamos averiguar cuántos píxeles tenemos disponibles en ancho y eso es algo que podemos
descúbrelo con la ayuda de React Native. Allí, desde React Native, puede
importar el objeto de dimensiones aquí, dimensiones es el nombre.
Ahora, este no es un componente que utilice, sino que es un objeto que le permite
saber cuánto ancho tiene disponible.
Ahora podemos usar esto, por ejemplo, allí donde establecemos el ancho de nuestro botón, en lugar de
establecerlo así, podemos establecer nuestro ancho
en dimensiones y luego hay un método get donde puede obtener las dimensiones de la ventana.
También puede obtenerlo de
la pantalla, la diferencia entre la ventana y la pantalla solo importa en Android, donde con la ventana, la altura de la barra de
estado se excluirá del cálculo y,
por lo tanto, esta será realmente la parte
de la pantalla donde su contenido vivir en.
Por lo tanto, normalmente debe usar la ventana aquí porque en iOS no
importa, en Android se garantiza que es la parte de la pantalla en la que realmente se encuentra su IU sin esa barra de estado
en la parte superior.
Por lo general, es posible que desee usar la ventana aquí para obtener la habitación real que tiene disponible para su
diseño, las dimensiones reales que puede usar para su diseño. Ahora, lo que esto le brinda es un objeto en el
que puede obtener un par de propiedades, cuatro para ser precisos: la escala
de fuente que configuró el usuario, por ejemplo, si los usuarios desean tener una fuente más grande, entonces
podrían obtener el multiplicador aquí con escala
de fuente, pero lo más importante, obtienes el ancho y la altura y si obtenemos el ancho aquí, obtenemos el ancho
total del dispositivo en
el que se ejecuta esta aplicación.
Ahora sabemos que queremos apretar al menos dos botones en este dispositivo aquí, por lo que podríamos simplemente dividir
esto
por dos, de modo que ahora cada botón tenga la mitad de ancho que el dispositivo.
Ahora, si guardamos esto, realmente no obtenemos el aspecto que queremos porque, por supuesto,
es demasiado grande, pero si dividimos esto entre tres, por ejemplo, entonces esto ya se ve mejor
en la pantalla pequeña,
no en la grande, pero ¿qué tal cuatro? Si tomamos cuatro, entonces tenemos suficiente espacio para todo
el otro espacio que necesitamos, como el espacio alrededor de nuestro contenedor y nos aseguramos de que nuestros botones siempre respeten el tamaño del dispositivo.
Ahora, por supuesto, aquí, podría haber logrado algo similar al establecer el ancho en un porcentaje,
como el 40% aquí, pero también quería introducir aquí las dimensiones API que usaremos
más adelante.
Es una gran API para descubrir cuántos píxeles tiene disponibles en el ancho y en la altura
del dispositivo o
en ejecución, y eso es importante, donde el porcentaje aquí siempre se refiere a la vista primaria directa y no
siempre al ancho disponible del
dispositivo , ese solo es el caso en el padre
superior, por decirlo así, en la vista superior que está renderizando. La ventana de obtención de dimensiones siempre le proporciona las dimensiones de todo
el dispositivo, sin importar dónde lo use.
Por lo tanto, el ancho aquí siempre es el ancho de nuestra pantalla en el dispositivo y nunca del padre o de cualquier otra cosa.
Por lo tanto, esto puede ser realmente útil si desea diseñar algo de una manera determinada o cambiar
el tamaño de algo de una manera determinada porque esto le indica cuánto ancho tiene disponible.