Maintenant, il y a une chose supplémentaire lors de la création d'applications mobiles pour les téléphones modernes, nous pouvons en quelque sorte
voir cela ici sur l'iPhone que j'ai tourné avec cette encoche ici.
Droite.
Et cette encoche peut parfois chevaucher votre contenu.
La même chose est vraie pour cette barre d'indicateur du Gestionnaire des tâches de l'écran d'accueil ici en bas sur l'iPhone.
Vous voyez qu'il chevauche notre nouveau bouton de jeu et oui je peux faire défiler vers le haut mais il rebondit et il est
toujours au-dessus de ce bouton.
Ce sont donc des éléments qui font partie du sage et qui peuvent fausser notre interface.
Par exemple, si nous avions laissé du texte aligné, il pourrait être chevauché par cette encoche ou dans ce cas, c'est le bouton de l'écran
d'accueil où il se trouve.
Eh bien, le gestionnaire de tâches est la barre d'indicateur qui chevauche notre contenu.
Et bien sûr, ce n'est pas seulement le cas sur les iPhones.
Vous pourriez avoir un problème similaire sur les appareils Android.
Là, vous avez également des appareils avec une encoche ou quelque chose comme ça.
Maintenant, pour vous assurer que votre application a toujours fière allure sur tous les différents appareils, React Native
a un composant spécial, vous pouvez utiliser un composant qui ajuste automatiquement votre contenu pour qu'il s'adapte à l'écran de
votre appareil et respecte les encoches et autres choses.
Ainsi, par exemple ici dans le jeu sur écran où j'ai ce problème ici sur l'iPhone, nous pouvons importer ce
composant spécial que React Native offre et c'est la vue de la zone de sécurité.
Cela s'appelle comme ça parce que c'est une vue d'habillage que nous pouvons mettre autour de notre contenu qui marque la
zone de sécurité la zone dans laquelle nous pouvons positionner notre contenu parce que là nous n'aurons pas de problèmes avec les encoches et
ainsi de suite.
Maintenant, comment utilisez-vous pour enregistrer la zone de.
Il vous suffit de le prendre et de l'enrouler autour de votre contenu.
Ainsi, autour de notre vue de défilement ici, par exemple, nous pouvons envelopper tout cela sur le jeu sur l'écran avec la
vue de la zone de sécurité et c'est important en passant.
Les vues de zone de sécurité doivent toujours envelopper votre vue de dessus.
Donc, dans ce cas, cette vue de défilement ici est maintenant aussi sûre.
Si nous revenons en arrière et que nous parcourons notre jeu très rapidement ici sur l'iPhone, commencez un nouveau jeu cinquante-cinq est le
nombre et résolvez cela, alors
ce que vous voyez est quelque chose d'intéressant, le problème s'est encore aggravé.
Bien avant de prendre soin de cela, veuillez noter que ces barres de défilement que vous voyez ici à droite sont
maintenant un peu en retrait.
Ce n'est pas totalement à droite et c'est déjà une vue de la zone
de sécurité qui a un certain effet qui ajoute du rembourrage à gauche et à droite pour nous assurer que nous respectons bien
l'encoche qui prendrait de la place là-bas et nous donnerait un rembourrage que notre contenu n'est certainement pas superposé par l'encoche.
Mais bien sûr, nous avons un problème là-bas au fond.
La raison en est que je n'utilise pas vraiment la vue de la zone de sauvegarde comme ma vue la plus haute.
Alors supprimons-le du jeu sur l'écran parce que c'est notre vue de dessus.
Eh bien, c'est dans le fichier d'échecs de l'application à la fin.
Nous avons notre contenu cette vue ici où nous devons en-tête, puis quel que soit le chargement de la visionneuse.
Ainsi, par exemple, l'en-tête ne fait pas partie de sa vue de zone de sauvegarde et devrait certainement l'être.
Donc, importons la vue Zone sûre ici dans le fichier jazz de l'application et enveloppons cette vue ici avec ça comme ça
alors maintenant avec cela, enregistrons-la et regardons un certain nombre avec l'attente du rechargement de l'application et ce que nous voyons
est vide écran maintenant la solution est simple.
Prenons le style que nous avons appliqué à cela et appliquons à la zone Enregistrer de vous et maintenant débarrassons-nous de cette
autre vue.
Parce que maintenant, il remplace simplement notre vue normale ici et fonctionne maintenant et
allons à nouveau pour ce jeu, résolvons rapidement
ce que vous voyez maintenant est mort ici en bas.
Nous avons maintenant un espacement supplémentaire entre cela.
Je veux aller à la barre du gestionnaire de tâches ici et au nouveau bouton de jeu que nous n'avions pas auparavant.
Nous avons également ici l'espacement à gauche et à droite pour respecter l'encoche afin que cela ne chevauche jamais le
contenu.
Nous pourrions avoir sur la gauche là-bas et nous avons un rembourrage supplémentaire en haut et en bas.
Maintenant, bien sûr, notre en-tête n'a pas l'air super beau avec cet espacement supplémentaire ici et c'est en fait quelque chose dont nous
nous occuperons dans le module de navigation ou en fait, nous nous occuperons de nous.
Nous n'aurons pas à faire grand-chose là-bas, mais encore une fois, ce n'est pas quelque chose dont nous devons nous inquiéter.
Par conséquent, ce qui peut nous inquiéter, c'est que notre contenu soit toujours visible et avec la zone de
sécurité de vous, vous pouvez vous assurer qu'il l'est.
Maintenant, cela ne signifie pas que vous devez envelopper tout votre contenu ou l'ensemble de votre application dans
une zone de sécurité en tout temps, comme vous le verrez dans le prochain module lorsque nous parlerons de navigation dans de
nombreuses applications que vous utiliserez réellement. une bibliothèque qui s'en occupe dans de nombreux cas pour vous que la bibliothèque de navigation
y utilisera.
Ainsi, dans de nombreuses applications, car la plupart de vos applications auront une navigation que vous n'aurez pas à
gérer simplement manuellement.
Mais si vous créez une application où vous n'avez aucune autre bibliothèque qui s'occupe de cela, comme cette
application, cela vous dérange lorsque je pense à envelopper votre contenu avec une vue de zone de sauvegarde si le contenu est
sinon chevauché.