Ahora tuvimos otro problema en esta aplicación aquí porque una vez que todo esto se resuelve
aquí, si vamos rápidamente allí, asegúrese de resolverlo,
entonces tenemos esta pantalla y esta pantalla también está rota.
Tenemos dos problemas aquí
en realidad, uno es que la pantalla no se puede desplazar, lo que no fue un problema en
dispositivos más grandes donde tenemos más altura, pero aquí, no podemos exprimir todo el contenido en la pantalla, por
lo que es posible que deseemos hagamos que se pueda desplazar solo para que sea seguro y / o alternativamente, nos aseguramos de que tengamos
la seguridad de que todo se ajuste a la pantalla y que este sea el caso, tenemos que ir al juego sobre
la pantalla y calcular nuestras alturas aquí dinámicamente, especialmente la altura de la imagen aquí, que ahora mismo estamos codificando a 300 píxeles,
que es demasiado grande en el dispositivo pequeño.
Ahora que ya aprendió sobre la solución para
eso, nuevamente podemos usar las dimensiones API importándolas desde React Native y con las dimensiones importadas, podemos bajar a
nuestra hoja de estilo y en el contenedor de imágenes, ahora podemos decir que las dimensiones obtienen el ancho de la ventana y
ahora digamos para el contenedor de imágenes, para la imagen aquí, queremos tener un ancho de quizás el 70% del ancho disponible y queremos tener el
mismo valor que una altura, así que simplemente copiaré
eso allí.
Importante aquí, no usamos altura porque la imagen no debe ser el 70% de nuestra altura disponible, sino que
debe
tener la misma altura que el ancho y eso se calcula en el ancho del
dispositivo, por lo que usamos el ancho allí abajo también. Ahora, aquí el radio del borde debe ser la mitad de eso,
por lo que también podemos usarlo aquí y luego dividirlo por dos y tendremos el radio del borde perfecto
para ese ancho calculado dinámicamente. Entonces esa es una cosa importante.
Ahora también tenemos un par de otros tamaños que estamos configurando, como el margen vertical aquí que codificamos a
30, lo mismo para el contenedor de resultados y es posible que también deseemos cambiar esto. Entonces, aquí también podemos decir que las dimensiones obtienen
ventana, en este caso altura y tal vez
dividir esto entre 20 y ver si eso se ve bien y también abajo margen vertical, tal vez dividir esto por
40 porque era 15, esto era 30, entonces dividamos esto entre 40,
si dividimos esto entre 20 para tener la misma relación entre
estos dos márgenes verticales nuevamente.
Entonces, resolvamos esto
nuevamente y veamos cuál es el resultado, mejor, ahora al menos podemos ver
el botón, pero aún no es perfecto.
Este margen aquí es ciertamente demasiado grande y también el tamaño de fuente, podríamos reducir esto también.
Entonces, una imagen más redonda, ciertamente podemos dividir la altura por 30 aquí para este
margen que estamos configurando y luego pasar a 60 para este margen vertical del contenedor de resultados y para
el tamaño de fuente aquí, aquí podemos usar un if check si queremos y, por ejemplo, verifique nuestra altura disponible aquí y, si es
menor que 400, entonces usamos 16 aquí y de lo contrario, usamos 20. Ahora, por último, pero no menos importante, también para asegurarnos de que podemos
desplazarnos porque a veces con todos los ajustes, aún no podremos ajustarlo en la
pantalla, al menos no sin hacer que todo sea
demasiado pequeño, es posible que queramos importar ese desplazamiento ver aquí y envolver nuestra vista con eso, así
que agregue la vista de desplazamiento aquí alrededor de nuestra vista para hacer que se pueda desplazar y
ahora echemos un vistazo a
esto
nuevamente, resolvamos esto, ahora esto se ve mejor. Cabe en la pantalla y, si es necesario, también podríamos desplazarlo,
podemos ver eso en el iPhone, por cierto, allí, si resolvemos
esto, en el iPhone siempre podemos desplazarnos un
poco y rebota atrás, tenemos habilitado el desplazamiento y, por lo tanto, ahora esto se
ve bien en el iPhone, pero también en este dispositivo donde reducimos un poco el tamaño de la fuente,
trabajamos un poco el espacio aquí y si fuera más
allá de nuestros límites, entonces podríamos desplácese, para que siempre podamos interactuar con nuestro juego. Así que esa es la API de dimensiones aquí y la API de dimensiones
realmente nos ayuda a construir interfaces de usuario que se ven bien en diferentes tamaños de dispositivo y, como aprendió, hay
diferentes formas de usarlo: para calcular dinámicamente los tamaños, ya sea para ancho o altura o márgenes y también, por supuesto, en
las declaraciones if para representar simplemente contenido diferente, adjuntar diferentes estilos u objetos de estilo diferentes en función de las
condiciones de ancho o alto que está configurando aquí, pero eso no es todo porque los
usuarios también pueden cambiar la orientación del dispositivo mientras se ejecuta la aplicación y eso a veces
también significa que necesitamos cambiar el estilo y / o el diseño.