Ahora que hay una cosa adicional al crear aplicaciones móviles para teléfonos modernos, podemos ver esto aquí
en el iPhone, que roté, tiene esta muesca aquí.
Correcto.
Y esta muesca a veces puede superponerse a su contenido.
Lo mismo es cierto para esta barra indicadora del Administrador de tareas de la pantalla de inicio aquí en la parte inferior del iPhone.
Ves que se superpone a nuestro nuevo botón de juego y sí, puedo desplazarme hacia arriba, pero se recupera y siempre está
por encima de ese botón.
Entonces, estos son elementos que son sabios y que pueden distorsionar nuestra interfaz.
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
pantalla de inicio donde está.
Bueno, el administrador de tareas es la barra indicadora que se superpone a nuestro contenido.
Y, por supuesto, ese no es solo el caso en los iPhones.
Podría tener un problema similar en los dispositivos Android.
Allí también tienes dispositivos con una muesca o algo así.
Ahora, para asegurarse de que su aplicación siempre se ve bien en todos los dispositivos diferentes, React Native tiene
un componente especial que puede usar un componente que ajusta automáticamente su contenido para que se ajuste a la pantalla de
su dispositivo y respete las muescas y otras cosas.
Entonces, por ejemplo, aquí en el juego sobre pantalla donde tengo este problema aquí en el iPhone, podemos importar
este componente especial que React Native ofrece y esa es la vista de área segura.
Se llama así porque es una vista de ajuste que podemos colocar alrededor de nuestro contenido que marca
el área segura en el área en la que podemos ubicar nuestro contenido porque allí no tendremos problemas con las
muescas, etc.
Ahora, ¿cómo se utiliza para guardar el área de.
Simplemente tómalo y envuélvelo alrededor de tu contenido.
Entonces, alrededor de nuestra vista de desplazamiento aquí, por ejemplo, podemos envolver todo eso en el juego sobre la pantalla con
la vista de área segura y eso es importante por cierto.
Las vistas de área segura siempre deben envolver su vista superior.
Entonces, en este caso, esta vista de desplazamiento aquí, ahora es segura.
Si volvemos y revisamos nuestro juego muy rápido aquí en el iPhone, iniciamos un nuevo juego, cincuenta y cinco es el
número y resuelven esto, entonces
lo que ves es algo interesante, el problema empeoró aún más.
Mucho antes de que nos preocupemos por esto, tenga en cuenta que estas barras de desplazamiento que ve aquí a la derecha
ahora están un poco sangradas.
No está totalmente a la derecha y eso ya es una vista de área segura
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
que ocuparía un poco de espacio allí y nos dará algo de relleno. que nuestro contenido definitivamente no se superpone con la muesca.
Pero, por supuesto, tenemos un problema allí abajo en la parte inferior.
La razón de esto es que realmente no estoy usando la vista de área de guardar como mi vista más superior.
Entonces, eliminémoslo del juego en la pantalla porque cuál es nuestra vista superior.
Bueno, eso está en el archivo de ajedrez de la aplicación al final allí.
Tenemos nuestro contenido en esta vista aquí, donde tenemos que encabezar y luego cualquier visor que cargue.
Entonces, por ejemplo, el encabezado no es parte de su vista de área de guardado y definitivamente debería serlo.
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
veamos
un número con la espera de que la aplicación se vuelva a cargar y lo que vemos es
un espacio vacío La pantalla ahora la solución es simple.
Tomemos el estilo que aplicamos a usted y apliquemos al área Guardar de usted y ahora eliminemos esta otra
vista.
Porque ahora solo reemplaza nuestra vista normal aquí y ahora funciona y
ahora vamos por ese juego nuevamente, resolvamos rápidamente
lo que ahora ves muerto en la parte inferior.
Ahora tenemos un espacio extra entre eso.
Quiero ir a la barra del administrador de tareas aquí y al nuevo botón del juego que no teníamos antes.
También tenemos el espacio a la izquierda y a la derecha aquí para respetar la muesca para que esto nunca se superponga al
contenido.
Podríamos tener a la izquierda allí y tenemos algo de relleno adicional en la parte superior e inferior.
Ahora, por supuesto, nuestro encabezado no se ve súper hermoso con este espacio adicional aquí y eso es realmente algo de lo
que nos ocuparemos en el módulo de navegación o de lo que nos ocuparemos.
No tendremos que hacer mucho allí, pero nuevamente esto no es algo de lo que tengamos que preocuparnos.
Por lo tanto, lo que nos preocupa es que nuestro contenido esté siempre visible y con su
área segura puede asegurarse de que lo sea.
Ahora, eso no significa que deba envolver todo su contenido o toda su aplicación en una vista
de área segura todo el tiempo, como verá en el próximo módulo cuando todos hablemos sobre la navegación en muchas
aplicaciones que realmente usará una biblioteca que se ocupa de esto en muchos casos para usted, la biblioteca de navegación
usará allí.
Entonces, en muchas aplicaciones porque la mayoría de sus aplicaciones tendrán navegación, no tendrá que administrarlas
solo manualmente.
Pero si está creando una aplicación donde no tiene otra biblioteca que se esté ocupando de esto, como esta
aplicación, aquí le importa cuando considero envolver su contenido con una vista de área de guardado si, de lo contrario, el contenido
se superpone.