1 00:00:02,310 --> 00:00:09,750 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 2 00:00:09,810 --> 00:00:13,880 voir cela ici sur l'iPhone que j'ai tourné avec cette encoche ici. 3 00:00:13,890 --> 00:00:14,520 Droite. 4 00:00:14,580 --> 00:00:19,380 Et cette encoche peut parfois chevaucher votre contenu. 5 00:00:19,380 --> 00:00:26,010 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. 6 00:00:26,010 --> 00:00:32,280 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 7 00:00:32,370 --> 00:00:33,990 toujours au-dessus de ce bouton. 8 00:00:33,990 --> 00:00:40,370 Ce sont donc des éléments qui font partie du sage et qui peuvent fausser notre interface. 9 00:00:40,380 --> 00:00:47,310 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 10 00:00:47,370 --> 00:00:48,930 d'accueil où il se trouve. 11 00:00:49,290 --> 00:00:54,250 Eh bien, le gestionnaire de tâches est la barre d'indicateur qui chevauche notre contenu. 12 00:00:54,660 --> 00:00:57,090 Et bien sûr, ce n'est pas seulement le cas sur les iPhones. 13 00:00:57,090 --> 00:00:59,760 Vous pourriez avoir un problème similaire sur les appareils Android. 14 00:00:59,780 --> 00:01:04,080 Là, vous avez également des appareils avec une encoche ou quelque chose comme ça. 15 00:01:04,140 --> 00:01:11,640 Maintenant, pour vous assurer que votre application a toujours fière allure sur tous les différents appareils, React Native 16 00:01:11,640 --> 00:01:19,680 a un composant spécial, vous pouvez utiliser un composant qui ajuste automatiquement votre contenu pour qu'il s'adapte à l'écran de 17 00:01:19,680 --> 00:01:23,830 votre appareil et respecte les encoches et autres choses. 18 00:01:23,850 --> 00:01:29,280 Ainsi, par exemple ici dans le jeu sur écran où j'ai ce problème ici sur l'iPhone, nous pouvons importer ce 19 00:01:29,310 --> 00:01:33,750 composant spécial que React Native offre et c'est la vue de la zone de sécurité. 20 00:01:34,080 --> 00:01:41,640 Cela s'appelle comme ça parce que c'est une vue d'habillage que nous pouvons mettre autour de notre contenu qui marque la 21 00:01:41,780 --> 00:01:50,430 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 22 00:01:50,460 --> 00:01:51,660 ainsi de suite. 23 00:01:51,660 --> 00:01:53,770 Maintenant, comment utilisez-vous pour enregistrer la zone de. 24 00:01:53,780 --> 00:01:57,590 Il vous suffit de le prendre et de l'enrouler autour de votre contenu. 25 00:01:57,600 --> 00:02:04,710 Ainsi, autour de notre vue de défilement ici, par exemple, nous pouvons envelopper tout cela sur le jeu sur l'écran avec la 26 00:02:04,710 --> 00:02:08,660 vue de la zone de sécurité et c'est important en passant. 27 00:02:08,660 --> 00:02:12,640 Les vues de zone de sécurité doivent toujours envelopper votre vue de dessus. 28 00:02:12,650 --> 00:02:17,170 Donc, dans ce cas, cette vue de défilement ici est maintenant aussi sûre. 29 00:02:17,180 --> 00:02:26,140 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 30 00:02:26,140 --> 00:02:28,480 nombre et résolvez cela, alors 31 00:02:33,070 --> 00:02:38,200 ce que vous voyez est quelque chose d'intéressant, le problème s'est encore aggravé. 32 00:02:38,200 --> 00:02:45,910 Bien avant de prendre soin de cela, veuillez noter que ces barres de défilement que vous voyez ici à droite sont 33 00:02:45,910 --> 00:02:48,040 maintenant un peu en retrait. 34 00:02:48,040 --> 00:02:53,500 Ce n'est pas totalement à droite et c'est déjà une vue de la zone 35 00:02:53,500 --> 00:03:01,840 de sécurité qui a un certain effet qui ajoute du rembourrage à gauche et à droite pour nous assurer que nous respectons bien 36 00:03:01,840 --> 00:03:09,730 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. 37 00:03:09,730 --> 00:03:13,030 Mais bien sûr, nous avons un problème là-bas au fond. 38 00:03:13,030 --> 00:03:18,040 La raison en est que je n'utilise pas vraiment la vue de la zone de sauvegarde comme ma vue la plus haute. 39 00:03:18,040 --> 00:03:22,930 Alors supprimons-le du jeu sur l'écran parce que c'est notre vue de dessus. 40 00:03:23,020 --> 00:03:26,190 Eh bien, c'est dans le fichier d'échecs de l'application à la fin. 41 00:03:26,230 --> 00:03:33,750 Nous avons notre contenu cette vue ici où nous devons en-tête, puis quel que soit le chargement de la visionneuse. 42 00:03:33,770 --> 00:03:39,100 Ainsi, par exemple, l'en-tête ne fait pas partie de sa vue de zone de sauvegarde et devrait certainement l'être. 43 00:03:39,110 --> 00:03:49,130 Donc, importons la vue Zone sûre ici dans le fichier jazz de l'application et enveloppons cette vue ici avec ça comme ça 44 00:03:49,130 --> 00:03:58,760 alors maintenant avec cela, enregistrons-la et regardons un certain nombre avec l'attente du rechargement de l'application et ce que nous voyons 45 00:03:58,850 --> 00:04:02,750 est vide écran maintenant la solution est simple. 46 00:04:02,780 --> 00:04:08,360 Prenons le style que nous avons appliqué à cela et appliquons à la zone Enregistrer de vous et maintenant débarrassons-nous de cette 47 00:04:08,380 --> 00:04:08,980 autre vue. 48 00:04:08,990 --> 00:04:15,090 Parce que maintenant, il remplace simplement notre vue normale ici et fonctionne maintenant et 49 00:04:15,180 --> 00:04:19,590 allons à nouveau pour ce jeu, résolvons rapidement 50 00:04:23,720 --> 00:04:28,160 ce que vous voyez maintenant est mort ici en bas. 51 00:04:28,160 --> 00:04:30,960 Nous avons maintenant un espacement supplémentaire entre cela. 52 00:04:31,100 --> 00:04:36,700 Je veux aller à la barre du gestionnaire de tâches ici et au nouveau bouton de jeu que nous n'avions pas auparavant. 53 00:04:36,740 --> 00:04:42,350 Nous avons également ici l'espacement à gauche et à droite pour respecter l'encoche afin que cela ne chevauche jamais le 54 00:04:42,350 --> 00:04:42,790 contenu. 55 00:04:42,800 --> 00:04:48,690 Nous pourrions avoir sur la gauche là-bas et nous avons un rembourrage supplémentaire en haut et en bas. 56 00:04:48,770 --> 00:04:56,180 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 57 00:04:56,180 --> 00:05:01,270 nous occuperons dans le module de navigation ou en fait, nous nous occuperons de nous. 58 00:05:01,280 --> 00:05:05,690 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. 59 00:05:05,690 --> 00:05:11,460 Par conséquent, ce qui peut nous inquiéter, c'est que notre contenu soit toujours visible et avec la zone de 60 00:05:11,460 --> 00:05:14,210 sécurité de vous, vous pouvez vous assurer qu'il l'est. 61 00:05:14,210 --> 00:05:20,050 Maintenant, cela ne signifie pas que vous devez envelopper tout votre contenu ou l'ensemble de votre application dans 62 00:05:20,060 --> 00:05:26,930 une zone de sécurité en tout temps, comme vous le verrez dans le prochain module lorsque nous parlerons de navigation dans de 63 00:05:26,930 --> 00:05:33,800 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 64 00:05:33,830 --> 00:05:34,700 y utilisera. 65 00:05:34,940 --> 00:05:39,980 Ainsi, dans de nombreuses applications, car la plupart de vos applications auront une navigation que vous n'aurez pas à 66 00:05:39,980 --> 00:05:40,790 gérer simplement manuellement. 67 00:05:40,940 --> 00:05:46,460 Mais si vous créez une application où vous n'avez aucune autre bibliothèque qui s'occupe de cela, comme cette 68 00:05:46,460 --> 00:05:52,760 application, cela vous dérange lorsque je pense à envelopper votre contenu avec une vue de zone de sauvegarde si le contenu est 69 00:05:52,760 --> 00:05:53,420 sinon chevauché.