1 00:00:02,310 --> 00:00:09,750 Ahora que hay una cosa adicional al crear aplicaciones móviles para teléfonos modernos, podemos ver esto aquí 2 00:00:09,810 --> 00:00:13,880 en el iPhone, que roté, tiene esta muesca aquí. 3 00:00:13,890 --> 00:00:14,520 Correcto. 4 00:00:14,580 --> 00:00:19,380 Y esta muesca a veces puede superponerse a su contenido. 5 00:00:19,380 --> 00:00:26,010 Lo mismo es cierto para esta barra indicadora del Administrador de tareas de la pantalla de inicio aquí en la parte inferior del iPhone. 6 00:00:26,010 --> 00:00:32,280 Ves que se superpone a nuestro nuevo botón de juego y sí, puedo desplazarme hacia arriba, pero se recupera y siempre está 7 00:00:32,370 --> 00:00:33,990 por encima de ese botón. 8 00:00:33,990 --> 00:00:40,370 Entonces, estos son elementos que son sabios y que pueden distorsionar nuestra interfaz. 9 00:00:40,380 --> 00:00:47,310 Por ejemplo, si hubiéramos dejado el texto alineado, podría estar superpuesto por esta muesca o, en este caso, es el botón de la 10 00:00:47,370 --> 00:00:48,930 pantalla de inicio donde está. 11 00:00:49,290 --> 00:00:54,250 Bueno, el administrador de tareas es la barra indicadora que se superpone a nuestro contenido. 12 00:00:54,660 --> 00:00:57,090 Y, por supuesto, ese no es solo el caso en los iPhones. 13 00:00:57,090 --> 00:00:59,760 Podría tener un problema similar en los dispositivos Android. 14 00:00:59,780 --> 00:01:04,080 Allí también tienes dispositivos con una muesca o algo así. 15 00:01:04,140 --> 00:01:11,640 Ahora, para asegurarse de que su aplicación siempre se ve bien en todos los dispositivos diferentes, React Native tiene 16 00:01:11,640 --> 00:01:19,680 un componente especial que puede usar un componente que ajusta automáticamente su contenido para que se ajuste a la pantalla de 17 00:01:19,680 --> 00:01:23,830 su dispositivo y respete las muescas y otras cosas. 18 00:01:23,850 --> 00:01:29,280 Entonces, por ejemplo, aquí en el juego sobre pantalla donde tengo este problema aquí en el iPhone, podemos importar 19 00:01:29,310 --> 00:01:33,750 este componente especial que React Native ofrece y esa es la vista de área segura. 20 00:01:34,080 --> 00:01:41,640 Se llama así porque es una vista de ajuste que podemos colocar alrededor de nuestro contenido que marca 21 00:01:41,780 --> 00:01:50,430 el área segura en el área en la que podemos ubicar nuestro contenido porque allí no tendremos problemas con las 22 00:01:50,460 --> 00:01:51,660 muescas, etc. 23 00:01:51,660 --> 00:01:53,770 Ahora, ¿cómo se utiliza para guardar el área de. 24 00:01:53,780 --> 00:01:57,590 Simplemente tómalo y envuélvelo alrededor de tu contenido. 25 00:01:57,600 --> 00:02:04,710 Entonces, alrededor de nuestra vista de desplazamiento aquí, por ejemplo, podemos envolver todo eso en el juego sobre la pantalla con 26 00:02:04,710 --> 00:02:08,660 la vista de área segura y eso es importante por cierto. 27 00:02:08,660 --> 00:02:12,640 Las vistas de área segura siempre deben envolver su vista superior. 28 00:02:12,650 --> 00:02:17,170 Entonces, en este caso, esta vista de desplazamiento aquí, ahora es segura. 29 00:02:17,180 --> 00:02:26,140 Si volvemos y revisamos nuestro juego muy rápido aquí en el iPhone, iniciamos un nuevo juego, cincuenta y cinco es el 30 00:02:26,140 --> 00:02:28,480 número y resuelven esto, entonces 31 00:02:33,070 --> 00:02:38,200 lo que ves es algo interesante, el problema empeoró aún más. 32 00:02:38,200 --> 00:02:45,910 Mucho antes de que nos preocupemos por esto, tenga en cuenta que estas barras de desplazamiento que ve aquí a la derecha 33 00:02:45,910 --> 00:02:48,040 ahora están un poco sangradas. 34 00:02:48,040 --> 00:02:53,500 No está totalmente a la derecha y eso ya es una vista de área segura 35 00:02:53,500 --> 00:03:01,840 que tiene algún efecto que agrega un poco de relleno a la izquierda y a la derecha para asegurarnos de que respetamos la muesca 36 00:03:01,840 --> 00:03:09,730 que ocuparía un poco de espacio allí y nos dará algo de relleno. que nuestro contenido definitivamente no se superpone con la muesca. 37 00:03:09,730 --> 00:03:13,030 Pero, por supuesto, tenemos un problema allí abajo en la parte inferior. 38 00:03:13,030 --> 00:03:18,040 La razón de esto es que realmente no estoy usando la vista de área de guardar como mi vista más superior. 39 00:03:18,040 --> 00:03:22,930 Entonces, eliminémoslo del juego en la pantalla porque cuál es nuestra vista superior. 40 00:03:23,020 --> 00:03:26,190 Bueno, eso está en el archivo de ajedrez de la aplicación al final allí. 41 00:03:26,230 --> 00:03:33,750 Tenemos nuestro contenido en esta vista aquí, donde tenemos que encabezar y luego cualquier visor que cargue. 42 00:03:33,770 --> 00:03:39,100 Entonces, por ejemplo, el encabezado no es parte de su vista de área de guardado y definitivamente debería serlo. 43 00:03:39,110 --> 00:03:49,130 Así que importaremos la vista de Área segura aquí en el archivo de jazz de la aplicación y envuelvamos esta vista aquí, así que ahora con esto, guardemos y 44 00:03:49,130 --> 00:03:49,550 veamos 45 00:03:52,480 --> 00:03:58,760 un número con la espera de que la aplicación se vuelva a cargar y lo que vemos es 46 00:03:58,850 --> 00:04:02,750 un espacio vacío La pantalla ahora la solución es simple. 47 00:04:02,780 --> 00:04:08,360 Tomemos el estilo que aplicamos a usted y apliquemos al área Guardar de usted y ahora eliminemos esta otra 48 00:04:08,380 --> 00:04:08,980 vista. 49 00:04:08,990 --> 00:04:15,090 Porque ahora solo reemplaza nuestra vista normal aquí y ahora funciona y 50 00:04:15,180 --> 00:04:19,590 ahora vamos por ese juego nuevamente, resolvamos rápidamente 51 00:04:23,720 --> 00:04:28,160 lo que ahora ves muerto en la parte inferior. 52 00:04:28,160 --> 00:04:30,960 Ahora tenemos un espacio extra entre eso. 53 00:04:31,100 --> 00:04:36,700 Quiero ir a la barra del administrador de tareas aquí y al nuevo botón del juego que no teníamos antes. 54 00:04:36,740 --> 00:04:42,350 También tenemos el espacio a la izquierda y a la derecha aquí para respetar la muesca para que esto nunca se superponga al 55 00:04:42,350 --> 00:04:42,790 contenido. 56 00:04:42,800 --> 00:04:48,690 Podríamos tener a la izquierda allí y tenemos algo de relleno adicional en la parte superior e inferior. 57 00:04:48,770 --> 00:04:56,180 Ahora, por supuesto, nuestro encabezado no se ve súper hermoso con este espacio adicional aquí y eso es realmente algo de lo 58 00:04:56,180 --> 00:05:01,270 que nos ocuparemos en el módulo de navegación o de lo que nos ocuparemos. 59 00:05:01,280 --> 00:05:05,690 No tendremos que hacer mucho allí, pero nuevamente esto no es algo de lo que tengamos que preocuparnos. 60 00:05:05,690 --> 00:05:11,460 Por lo tanto, lo que nos preocupa es que nuestro contenido esté siempre visible y con su 61 00:05:11,460 --> 00:05:14,210 área segura puede asegurarse de que lo sea. 62 00:05:14,210 --> 00:05:20,050 Ahora, eso no significa que deba envolver todo su contenido o toda su aplicación en una vista 63 00:05:20,060 --> 00:05:26,930 de área segura todo el tiempo, como verá en el próximo módulo cuando todos hablemos sobre la navegación en muchas 64 00:05:26,930 --> 00:05:33,800 aplicaciones que realmente usará una biblioteca que se ocupa de esto en muchos casos para usted, la biblioteca de navegación 65 00:05:33,830 --> 00:05:34,700 usará allí. 66 00:05:34,940 --> 00:05:39,980 Entonces, en muchas aplicaciones porque la mayoría de sus aplicaciones tendrán navegación, no tendrá que administrarlas 67 00:05:39,980 --> 00:05:40,790 solo manualmente. 68 00:05:40,940 --> 00:05:46,460 Pero si está creando una aplicación donde no tiene otra biblioteca que se esté ocupando de esto, como esta 69 00:05:46,460 --> 00:05:52,760 aplicación, aquí le importa cuando considero envolver su contenido con una vista de área de guardado si, de lo contrario, el contenido 70 00:05:52,760 --> 00:05:53,420 se superpone.