1 00:00:02,830 --> 00:00:08,740 Ahora tuvimos otro problema en esta aplicación aquí porque una vez que todo esto se resuelve 2 00:00:08,740 --> 00:00:12,200 aquí, si vamos rápidamente allí, asegúrese de resolverlo, 3 00:00:12,220 --> 00:00:16,120 entonces tenemos esta pantalla y esta pantalla también está rota. 4 00:00:16,120 --> 00:00:17,670 Tenemos dos problemas aquí 5 00:00:17,680 --> 00:00:23,190 en realidad, uno es que la pantalla no se puede desplazar, lo que no fue un problema en 6 00:00:23,200 --> 00:00:29,050 dispositivos más grandes donde tenemos más altura, pero aquí, no podemos exprimir todo el contenido en la pantalla, por 7 00:00:29,050 --> 00:00:36,640 lo que es posible que deseemos hagamos que se pueda desplazar solo para que sea seguro y / o alternativamente, nos aseguramos de que tengamos 8 00:00:36,640 --> 00:00:43,270 la seguridad de que todo se ajuste a la pantalla y que este sea el caso, tenemos que ir al juego sobre 9 00:00:43,270 --> 00:00:50,230 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, 10 00:00:50,230 --> 00:00:52,810 que es demasiado grande en el dispositivo pequeño. 11 00:00:52,810 --> 00:00:55,950 Ahora que ya aprendió sobre la solución para 12 00:00:56,050 --> 00:01:02,880 eso, nuevamente podemos usar las dimensiones API importándolas desde React Native y con las dimensiones importadas, podemos bajar a 13 00:01:02,890 --> 00:01:11,430 nuestra hoja de estilo y en el contenedor de imágenes, ahora podemos decir que las dimensiones obtienen el ancho de la ventana y 14 00:01:12,150 --> 00:01:21,590 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 15 00:01:21,590 --> 00:01:24,860 mismo valor que una altura, así que simplemente copiaré 16 00:01:24,860 --> 00:01:25,920 eso allí. 17 00:01:25,920 --> 00:01:32,180 Importante aquí, no usamos altura porque la imagen no debe ser el 70% de nuestra altura disponible, sino que 18 00:01:32,480 --> 00:01:32,960 debe 19 00:01:33,200 --> 00:01:38,390 tener la misma altura que el ancho y eso se calcula en el ancho del 20 00:01:38,420 --> 00:01:45,260 dispositivo, por lo que usamos el ancho allí abajo también. Ahora, aquí el radio del borde debe ser la mitad de eso, 21 00:01:45,380 --> 00:01:50,840 por lo que también podemos usarlo aquí y luego dividirlo por dos y tendremos el radio del borde perfecto 22 00:01:50,900 --> 00:01:54,170 para ese ancho calculado dinámicamente. Entonces esa es una cosa importante. 23 00:01:54,200 --> 00:01:59,030 Ahora también tenemos un par de otros tamaños que estamos configurando, como el margen vertical aquí que codificamos a 24 00:01:59,030 --> 00:02:07,600 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 25 00:02:07,600 --> 00:02:11,380 ventana, en este caso altura y tal vez 26 00:02:11,380 --> 00:02:21,010 dividir esto entre 20 y ver si eso se ve bien y también abajo margen vertical, tal vez dividir esto por 27 00:02:21,040 --> 00:02:26,720 40 porque era 15, esto era 30, entonces dividamos esto entre 40, 28 00:02:26,740 --> 00:02:31,960 si dividimos esto entre 20 para tener la misma relación entre 29 00:02:31,960 --> 00:02:34,370 estos dos márgenes verticales nuevamente. 30 00:02:34,510 --> 00:02:35,980 Entonces, resolvamos esto 31 00:02:36,010 --> 00:02:41,150 nuevamente y veamos cuál es el resultado, mejor, ahora al menos podemos ver 32 00:02:41,180 --> 00:02:44,100 el botón, pero aún no es perfecto. 33 00:02:44,240 --> 00:02:50,150 Este margen aquí es ciertamente demasiado grande y también el tamaño de fuente, podríamos reducir esto también. 34 00:02:50,330 --> 00:02:56,570 Entonces, una imagen más redonda, ciertamente podemos dividir la altura por 30 aquí para este 35 00:02:56,570 --> 00:03:03,970 margen que estamos configurando y luego pasar a 60 para este margen vertical del contenedor de resultados y para 36 00:03:04,130 --> 00:03:13,860 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 37 00:03:13,860 --> 00:03:25,210 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 38 00:03:25,210 --> 00:03:31,310 desplazarnos porque a veces con todos los ajustes, aún no podremos ajustarlo en la 39 00:03:31,310 --> 00:03:35,400 pantalla, al menos no sin hacer que todo sea 40 00:03:35,510 --> 00:03:42,990 demasiado pequeño, es posible que queramos importar ese desplazamiento ver aquí y envolver nuestra vista con eso, así 41 00:03:42,990 --> 00:03:50,730 que agregue la vista de desplazamiento aquí alrededor de nuestra vista para hacer que se pueda desplazar y 42 00:03:50,850 --> 00:03:52,860 ahora echemos un vistazo a 43 00:03:52,880 --> 00:03:53,860 esto 44 00:04:03,670 --> 00:04:10,700 nuevamente, resolvamos esto, ahora esto se ve mejor. Cabe en la pantalla y, si es necesario, también podríamos desplazarlo, 45 00:04:10,700 --> 00:04:14,090 podemos ver eso en el iPhone, por cierto, allí, si resolvemos 46 00:04:19,360 --> 00:04:22,390 esto, en el iPhone siempre podemos desplazarnos un 47 00:04:22,390 --> 00:04:27,010 poco y rebota atrás, tenemos habilitado el desplazamiento y, por lo tanto, ahora esto se 48 00:04:27,040 --> 00:04:32,920 ve bien en el iPhone, pero también en este dispositivo donde reducimos un poco el tamaño de la fuente, 49 00:04:33,070 --> 00:04:36,420 trabajamos un poco el espacio aquí y si fuera más 50 00:04:36,520 --> 00:04:45,760 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 51 00:04:45,760 --> 00:04:52,250 realmente nos ayuda a construir interfaces de usuario que se ven bien en diferentes tamaños de dispositivo y, como aprendió, hay 52 00:04:52,250 --> 00:04:59,230 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 53 00:04:59,440 --> 00:05:05,710 las declaraciones if para representar simplemente contenido diferente, adjuntar diferentes estilos u objetos de estilo diferentes en función de las 54 00:05:05,710 --> 00:05:10,750 condiciones de ancho o alto que está configurando aquí, pero eso no es todo porque los 55 00:05:10,750 --> 00:05:16,180 usuarios también pueden cambiar la orientación del dispositivo mientras se ejecuta la aplicación y eso a veces 56 00:05:16,180 --> 00:05:20,440 también significa que necesitamos cambiar el estilo y / o el diseño.