Así que ahora con estos primeros pasos básicos tomados, si ahora completo un número aquí y continuamos, todo
esto me parece bien aquí, todo
funciona, si ahora comenzamos un juego, entonces
también quiero reducir este espacio que tenemos aquí y también quiero asegurarme de que mi caja esté allí, así
que
este registro de conjeturas que tenemos, que esto también
se ve mejor.
Ahora, eso es algo que podemos hacer en la pantalla del juego, por supuesto, porque esa es la
pantalla que estamos viendo allí.
Ahora, por supuesto, es el espaciado, este margen superior en nuestro contenedor inferior que es este contenedor, el margen superior es esta distancia
entre el número aquí y el contenedor y quiero cambiar esto. Ahora para cambiar esto, podemos
usar
nuevamente las dimensiones API.
Entonces, aquí, importo nuevamente dimensiones de React Native y ahora allá
abajo, podemos calcular este margen dinámicamente. Lo que podemos hacer aquí es que podemos obtener nuevamente las dimensiones de nuestra
ventana y luego aquí, el ancho o, en este caso, probablemente la altura y luego dividir esto por algo,
pero esto sería muy engorroso, podríamos dividir esto por 20 por ejemplo , a los 20 y ver si eso se ve bien, pero este
es realmente un juego de adivinanzas, entonces, podría no ser lo que realmente queremos.
En cambio, podríamos verificar cuánta altura tenemos disponible y luego usar un
espaciado diferente en función de eso. Podríamos verificar si nuestra altura es mayor que 600, si ese es el caso,
queremos tener un espacio de 20, de lo contrario, tenemos uno de 10. Por lo tanto, también podemos usar las dimensiones que
estamos calculando en una condición if, en este caso en una expresión ternaria aquí, pero también
podría usarlo en una comprobación if normal.
Así que ahora podemos volver aquí y lo que vemos ahora es que cuando comenzamos el juego, no tenemos una gran
brecha aquí en la pantalla más pequeña, en el iPhone, que es una pantalla más grande, sin embargo,
definitivamente tenemos un espacio más grande y para verlo más claro, por supuesto, puede
jugar con eso y, por ejemplo, usar 30 para pantallas más pequeñas y 30 para pantallas más grandes y 5 para pantallas más
pequeñas y ahora definitivamente debería ver eso.
Aquí tenemos una pequeña brecha
y aquí, tenemos una brecha más grande.
Por lo tanto, también podemos usar esto en condiciones if.
Ahora con eso, volveré a configurar esto en 20 y 5 aquí, pero con suerte esto también muestra otra forma
de usar esto.
Puede usar esto en condiciones que, por supuesto, le dan mucha flexibilidad en los casos
en que no desea usar el ancho en un cálculo dinámico pero tiene diferentes valores codificados que desea usar en
función de los diferentes puntos de interrupción que desea establecido, un poco como lo sabe de CSS, donde también tiene
consultas de medios y luego puede representar diferentes cosas en función de diferentes consultas
de medios.
Tampoco está restringido a usar las dimensiones API allí en su hoja de estilo, por supuesto, puede usarlo en cualquier lugar donde
pueda usar Javascript, así que básicamente en todas partes en sus componentes. También puede adjuntar estilos totalmente diferentes según
el ancho o la altura disponibles. También podríamos usar las dimensiones get
window aquí donde asigno mi estilo y, por ejemplo, verifique mi altura aquí, verifique si es mayor a 600 y si
ese es el caso, use el contenedor de botones de estilos y, de lo contrario, use el contenedor de
botones de estilos pequeño si tuviéramos esto clase. No lo tengo aquí, así que lo eliminaré, pero esa es otra forma
de usar esto, puede usarlo en cualquier lugar donde se ejecute Javascript. Por supuesto, también puede usarlo aquí, podría tener
un check si justo aquí antes de devolver su código jsx y verificar la altura de la ventana, si es mayor que 600 y si ese
es el caso, digamos, devuelve un código jsx totalmente diferente y, por lo
tanto, este código a partir de entonces nunca se ejecutará si regresa aquí y solo si no lo hace
en este caso,
entonces si tiene un dispositivo que no es tan alto como este, entonces lo hace allí.
Así que aquí eres realmente flexible y usas esa flexibilidad para crear los diseños que deseas porque de eso
se trata y de lo que te brinda mucha flexibilidad para tus aplicaciones.
Ese es el espacio
aquí, ahora también quería cambiar mis elementos de registro allí, eso también es
algo que podemos hacer fácilmente, por supuesto.
Tenemos nuestros elementos de la lista allí y en los elementos de la lista, establecemos un ancho del 100% porque establecemos nuestro ancho de la lista
aquí con el contenedor de la lista y eso se establece en el 60%.
Ahora el 60% se ve bastante bien en dispositivos más grandes, creo, pero
en dispositivos más pequeños, podríamos ir más grande que eso.
Ahora, por supuesto, podemos intentar resolver esto con diferentes reglas aquí, donde establecemos un ancho máximo y un ancho mínimo
y quizás también usemos las dimensiones API para calcular esto dinámicamente o nuevamente usemos una verificación if.
Aquí podríamos decir nuevamente que las dimensiones obtienen ventana, obtienen el ancho disponible en este caso y
si eso es, digamos, mayor que 500, entonces
quiero usar 60%, de lo contrario quiero usar 80%. Así que ahora simplemente presentamos un contenedor de listas más amplio y más
amplio basado en el ancho disponible en el dispositivo
en el
que nos estamos ejecutando y, de hecho, usemos 350 aquí en lugar de 500 porque estamos hablando
del ancho, no de la altura.
Ahora, si ejecutamos esto en el iPhone, tenemos el mismo ancho que antes, pero en la pantalla más
pequeña, tenemos elementos más grandes.
Entonces eso también es algo que podemos hacer y, por supuesto, puedes jugar con el punto
de interrupción que estás estableciendo aquí.
Puede probar diferentes tamaños de punto de interrupción aquí.
Por supuesto, también podría tener múltiples
puntos de interrupción, puede tener expresiones ternarias anidadas aquí o antes de escribir demasiadas expresiones anidadas, simplemente configure diferentes
objetos de estilo aquí y luego cargue con diferentes cheques que use allí. Solo para darle un ejemplo de
esto, podríamos tener un contenedor de lista grande aquí y allá, establecemos uno flexible y
establecemos nuestro ancho de digamos 80% porque este es el grande
y aquí tenemos el normal con 60% .
Ahora no tengo ninguna condición, pero tengo dos objetos de estilo diferentes
y ahora solo necesitamos adjuntar diferentes objetos de estilo
allá arriba, no aquí, sino aquí, por supuesto, en esta vista. Bueno, para hacer esto, simplemente podemos configurar una variable de estilo de contenedor de lista
aquí, por ejemplo, y señalar el contenedor de lista de estilos, que es nuestro valor predeterminado, pero luego agregar un check si aquí donde
verificamos si las dimensiones obtienen el ancho de la ventana y ahora si el ancho aquí es decir, menor que 350, así que si tenemos un dispositivo pequeño,
entonces queremos tener el contenedor de la lista grande, para que podamos establecer el estilo del contenedor de
la lista, esta variable
igual al contenedor de la lista de estilos
grande para apuntar a este objeto de estilo y ahora podemos usar ese objeto de estilo aquí en la vista donde
necesitamos el estilo de contenedor de lista, ahora usamos la variable que contiene un objeto de estilo de
contenedor de lista diferente según el ancho de nuestro dispositivo. Y si ahora guardamos esto y lo ejecutamos nuevamente,
verá que en el iPhone con el dispositivo más grande donde tenemos más ancho, tenemos el contenedor más pequeño y aquí
en el teléfono Android con el dispositivo más pequeño, con menos ancho, obtenemos El contenedor más grande.
Por lo tanto, es el mismo resultado que
antes pero un poco más legible y ahora podríamos tener múltiples, por ejemplo, si verificamos aquí dónde
almacenamos diferentes estilos aquí en el estilo de contenedor de
lista que luego usamos allí, esto puede ser más legible que tener expresiones ternarias anidadas ahí abajo en tu objeto de hoja de estilo.
Así es como puedes jugar con eso y ser consciente de esa flexibilidad de las dimensiones API es
realmente crucial aquí.