1 00:00:02,230 --> 00:00:04,920 Sin embargo, a veces, simplemente no puede obtener 2 00:00:04,930 --> 00:00:10,720 el diseño correcto con un ancho porcentual y píxeles codificados de esta manera, a veces realmente necesita 3 00:00:10,720 --> 00:00:12,210 saber cuántos píxeles 4 00:00:12,340 --> 00:00:18,130 tiene disponibles, por ejemplo aquí en los botones donde establecemos un ancho de 100, establecemos 100 sin 5 00:00:18,130 --> 00:00:19,990 importar el tamaño del dispositivo. 6 00:00:19,990 --> 00:00:24,460 Ahora, en realidad, sabemos que queremos tener dos botones uno al lado del otro. 7 00:00:24,550 --> 00:00:31,960 Entonces, lo que podemos hacer es simplemente asegurarnos de tomar un ancho de botón que siempre se ajuste a la pantalla, sin 8 00:00:31,960 --> 00:00:33,830 importar cuán pequeño sea y 9 00:00:33,850 --> 00:00:39,460 para eso, necesitamos averiguar cuántos píxeles tenemos disponibles en ancho y eso es algo que podemos 10 00:00:39,460 --> 00:00:44,170 descúbrelo con la ayuda de React Native. Allí, desde React Native, puede 11 00:00:44,170 --> 00:00:48,880 importar el objeto de dimensiones aquí, dimensiones es el nombre. 12 00:00:48,940 --> 00:00:55,720 Ahora, este no es un componente que utilice, sino que es un objeto que le permite 13 00:00:55,810 --> 00:00:58,380 saber cuánto ancho tiene disponible. 14 00:00:58,420 --> 00:01:04,270 Ahora podemos usar esto, por ejemplo, allí donde establecemos el ancho de nuestro botón, en lugar de 15 00:01:04,780 --> 00:01:07,080 establecerlo así, podemos establecer nuestro ancho 16 00:01:07,210 --> 00:01:12,850 en dimensiones y luego hay un método get donde puede obtener las dimensiones de la ventana. 17 00:01:12,850 --> 00:01:14,440 También puede obtenerlo de 18 00:01:14,440 --> 00:01:21,700 la pantalla, la diferencia entre la ventana y la pantalla solo importa en Android, donde con la ventana, la altura de la barra de 19 00:01:21,700 --> 00:01:23,640 estado se excluirá del cálculo y, 20 00:01:23,740 --> 00:01:26,110 por lo tanto, esta será realmente la parte 21 00:01:26,260 --> 00:01:28,720 de la pantalla donde su contenido vivir en. 22 00:01:28,780 --> 00:01:32,130 Por lo tanto, normalmente debe usar la ventana aquí porque en iOS no 23 00:01:32,130 --> 00:01:38,800 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 24 00:01:38,800 --> 00:01:40,110 en la parte superior. 25 00:01:40,180 --> 00:01:46,390 Por lo general, es posible que desee usar la ventana aquí para obtener la habitación real que tiene disponible para su 26 00:01:46,390 --> 00:01:52,600 diseño, las dimensiones reales que puede usar para su diseño. Ahora, lo que esto le brinda es un objeto en el 27 00:01:52,750 --> 00:01:56,470 que puede obtener un par de propiedades, cuatro para ser precisos: la escala 28 00:01:56,470 --> 00:02:01,540 de fuente que configuró el usuario, por ejemplo, si los usuarios desean tener una fuente más grande, entonces 29 00:02:01,540 --> 00:02:03,560 podrían obtener el multiplicador aquí con escala 30 00:02:03,670 --> 00:02:09,610 de fuente, pero lo más importante, obtienes el ancho y la altura y si obtenemos el ancho aquí, obtenemos el ancho 31 00:02:09,610 --> 00:02:11,050 total del dispositivo en 32 00:02:11,050 --> 00:02:12,580 el que se ejecuta esta aplicación. 33 00:02:12,580 --> 00:02:19,390 Ahora sabemos que queremos apretar al menos dos botones en este dispositivo aquí, por lo que podríamos simplemente dividir 34 00:02:19,390 --> 00:02:19,800 esto 35 00:02:19,800 --> 00:02:25,730 por dos, de modo que ahora cada botón tenga la mitad de ancho que el dispositivo. 36 00:02:25,730 --> 00:02:30,190 Ahora, si guardamos esto, realmente no obtenemos el aspecto que queremos porque, por supuesto, 37 00:02:30,190 --> 00:02:35,620 es demasiado grande, pero si dividimos esto entre tres, por ejemplo, entonces esto ya se ve mejor 38 00:02:35,620 --> 00:02:37,060 en la pantalla pequeña, 39 00:02:37,060 --> 00:02:42,520 no en la grande, pero ¿qué tal cuatro? Si tomamos cuatro, entonces tenemos suficiente espacio para todo 40 00:02:42,520 --> 00:02:49,690 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. 41 00:02:49,720 --> 00:02:55,510 Ahora, por supuesto, aquí, podría haber logrado algo similar al establecer el ancho en un porcentaje, 42 00:02:55,510 --> 00:03:00,760 como el 40% aquí, pero también quería introducir aquí las dimensiones API que usaremos 43 00:03:00,760 --> 00:03:01,550 más adelante. 44 00:03:01,570 --> 00:03:07,480 Es una gran API para descubrir cuántos píxeles tiene disponibles en el ancho y en la altura 45 00:03:07,870 --> 00:03:09,140 del dispositivo o 46 00:03:09,190 --> 00:03:15,670 en ejecución, y eso es importante, donde el porcentaje aquí siempre se refiere a la vista primaria directa y no 47 00:03:15,670 --> 00:03:17,560 siempre al ancho disponible del 48 00:03:17,650 --> 00:03:20,880 dispositivo , ese solo es el caso en el padre 49 00:03:20,890 --> 00:03:28,330 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 50 00:03:28,330 --> 00:03:30,750 el dispositivo, sin importar dónde lo use. 51 00:03:30,760 --> 00:03:38,480 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. 52 00:03:38,560 --> 00:03:43,390 Por lo tanto, esto puede ser realmente útil si desea diseñar algo de una manera determinada o cambiar 53 00:03:43,390 --> 00:03:48,100 el tamaño de algo de una manera determinada porque esto le indica cuánto ancho tiene disponible.