1 00:00:02,310 --> 00:00:09,750 Jetzt gibt es eine zusätzliche Sache beim Erstellen von mobilen Apps für moderne Telefone. Wir können dies hier auf dem iPhone 2 00:00:09,810 --> 00:00:13,880 sehen, das ich gedreht habe. Es hat diese Kerbe hier. 3 00:00:13,890 --> 00:00:14,520 Richtig. 4 00:00:14,580 --> 00:00:19,380 Und diese Kerbe kann manchmal Ihren Inhalt überlappen. 5 00:00:19,380 --> 00:00:26,010 Gleiches gilt für diese Task-Manager-Anzeigeleiste auf dem Startbildschirm hier unten auf dem iPhone. 6 00:00:26,010 --> 00:00:32,280 Sie sehen, es überlappt unsere neue Spielschaltfläche und ja, ich kann nach oben scrollen, aber es springt zurück und befindet 7 00:00:32,370 --> 00:00:33,990 sich immer über dieser Schaltfläche. 8 00:00:33,990 --> 00:00:40,370 Das sind also Elemente, die Teil der Weisheit sind, die unsere Schnittstelle verzerren können. 9 00:00:40,380 --> 00:00:47,310 Wenn wir beispielsweise linksbündigen Text verwendet haben, wird dieser möglicherweise von dieser Kerbe überlappt, oder in diesem Fall handelt es sich um die Schaltfläche auf dem Startbildschirm, 10 00:00:47,370 --> 00:00:48,930 auf der er sich befindet. 11 00:00:49,290 --> 00:00:54,250 Nun, Task-Manager ist, welche Indikatorleiste unseren Inhalt überlappt. 12 00:00:54,660 --> 00:00:57,090 Und das ist natürlich nicht nur bei iPhones der Fall. 13 00:00:57,090 --> 00:00:59,760 Auf Android-Geräten kann ein ähnliches Problem auftreten. 14 00:00:59,780 --> 00:01:04,080 Dort haben Sie auch Geräte mit einer Kerbe oder mit so etwas. 15 00:01:04,140 --> 00:01:11,640 Um sicherzustellen, dass Ihre App auf allen verschiedenen Geräten immer gut aussieht, können Sie 16 00:01:11,640 --> 00:01:19,680 mit React Native eine spezielle Komponente verwenden, die Ihre Inhalte automatisch an den Bildschirm Ihres Geräts 17 00:01:19,680 --> 00:01:23,830 anpasst und Kerben und andere Dinge berücksichtigt. 18 00:01:23,850 --> 00:01:29,280 Zum Beispiel können wir hier im Spiel über dem Bildschirm, wo ich dieses Problem hier auf dem iPhone habe, diese 19 00:01:29,310 --> 00:01:33,750 spezielle Komponente importieren, die React Native anbietet, und das ist die Ansicht des sicheren Bereichs. 20 00:01:34,080 --> 00:01:41,640 Es wird so genannt, weil es eine Wrapping-Ansicht ist, die wir um unseren Inhalt legen können und die 21 00:01:41,780 --> 00:01:50,430 den sicheren Bereich markiert, in dem wir unseren Inhalt positionieren können, weil wir dort keine Probleme mit Kerben haben und 22 00:01:50,460 --> 00:01:51,660 so weiter. 23 00:01:51,660 --> 00:01:53,770 Wie können Sie nun den Bereich von speichern? 24 00:01:53,780 --> 00:01:57,590 Sie nehmen es einfach und wickeln es um Ihren Inhalt. 25 00:01:57,600 --> 00:02:04,710 Um unsere Bildlaufansicht hier herum können wir beispielsweise all das auf dem Spiel über dem Bildschirm mit der 26 00:02:04,710 --> 00:02:08,660 Ansicht des sicheren Bereichs umhüllen, und das ist übrigens wichtig. 27 00:02:08,660 --> 00:02:12,640 Ansichten für sichere Bereiche sollten immer Ihre oberste Ansicht einschließen. 28 00:02:12,650 --> 00:02:17,170 In diesem Fall ist diese Bildlaufansicht hier also jetzt so sicher. 29 00:02:17,180 --> 00:02:26,140 Wenn wir zurückgehen und unser Spiel hier auf dem iPhone ganz schnell durchgehen, starten Sie ein neues Spiel. Fünfundfünfzig ist die Zahl 30 00:02:26,140 --> 00:02:28,480 und lösen Sie dieses Problem. 31 00:02:33,070 --> 00:02:38,200 Dann ist das, was Sie sehen, etwas Interessantes. Das Problem wurde noch schlimmer. 32 00:02:38,200 --> 00:02:45,910 Bevor wir uns darum kümmern, beachten Sie bitte, dass diese Bildlaufleiste, die Sie hier rechts sehen, jetzt tatsächlich 33 00:02:45,910 --> 00:02:48,040 ein wenig eingerückt ist. 34 00:02:48,040 --> 00:02:53,500 Es ist nicht ganz rechts und das ist bereits eine sichere Bereichsansicht 35 00:02:53,500 --> 00:03:01,840 mit einem Effekt, der links und rechts etwas Polsterung hinzufügt, um sicherzustellen, dass wir die Kerbe respektieren, die dort etwas 36 00:03:01,840 --> 00:03:09,730 Platz beanspruchen würde, und uns etwas Polsterung geben dass unser Inhalt definitiv nicht von der Kerbe überlappt wird. 37 00:03:09,730 --> 00:03:13,030 Aber natürlich haben wir unten ein Problem. 38 00:03:13,030 --> 00:03:18,040 Grund dafür ist, dass ich die Ansicht zum Speichern des Bereichs nicht wirklich als meine oberste Ansicht verwende. 39 00:03:18,040 --> 00:03:22,930 Also lasst es uns von dort aus über den Bildschirm aus dem Spiel entfernen, denn was ist unsere Draufsicht. 40 00:03:23,020 --> 00:03:26,190 Nun, das steht am Ende in der App-Schachdatei. 41 00:03:26,230 --> 00:03:33,750 Wir haben unseren Inhalt dieser Ansicht hier, wo wir Header und dann den Viewer laden müssen. 42 00:03:33,770 --> 00:03:39,100 So ist beispielsweise die Kopfzeile nicht Teil seiner Ansicht zum Speichern des Bereichs und sollte es auf jeden Fall sein. 43 00:03:39,110 --> 00:03:49,130 Importieren wir also die Safe Area-Ansicht hier in die App-Jazz-Datei und schließen wir diese Ansicht hier so ein. Speichern Sie sie 44 00:03:49,130 --> 00:03:58,760 jetzt und lassen Sie uns eine Nummer mit dem Warten auf das Neuladen der App und dem, was wir sehen, 45 00:03:58,850 --> 00:04:02,750 leer sehen Bildschirm jetzt Lösung ist einfach. 46 00:04:02,780 --> 00:04:08,360 Nehmen wir den Stil, den wir auf Sie angewendet haben, und wenden Sie ihn auf den Bereich Speichern von Ihnen an. Entfernen Sie nun diese 47 00:04:08,380 --> 00:04:08,980 andere Ansicht. 48 00:04:08,990 --> 00:04:15,090 Weil es jetzt nur unsere normale Ansicht hier ersetzt und jetzt funktioniert und jetzt 49 00:04:15,180 --> 00:04:19,590 gehen wir noch einmal zu diesem Spiel. Lösen wir 50 00:04:23,720 --> 00:04:28,160 schnell das, was Sie jetzt sehen, ist hier unten tot. 51 00:04:28,160 --> 00:04:30,960 Wir haben jetzt einen zusätzlichen Abstand dazwischen. 52 00:04:31,100 --> 00:04:36,700 Ich möchte hier zur Task-Manager-Leiste und zur neuen Spielschaltfläche gehen, die wir vorher nicht hatten. 53 00:04:36,740 --> 00:04:42,350 Wir haben hier auch den Abstand links und rechts, um die Kerbe zu berücksichtigen, damit sich der Inhalt nie 54 00:04:42,350 --> 00:04:42,790 überschneidet. 55 00:04:42,800 --> 00:04:48,690 Wir haben dort vielleicht links und wir haben oben und unten eine zusätzliche Polsterung. 56 00:04:48,770 --> 00:04:56,180 Natürlich sieht unser Header mit diesem zusätzlichen Abstand hier nicht besonders schön aus, und darum kümmern 57 00:04:56,180 --> 00:05:01,270 wir uns im Navigationsmodul, oder wir kümmern uns um uns. 58 00:05:01,280 --> 00:05:05,690 Wir werden dort nicht viel tun müssen, aber auch hier müssen wir uns keine Sorgen machen. 59 00:05:05,690 --> 00:05:11,460 Wir können uns daher Sorgen machen, dass unser Inhalt immer sichtbar ist und Sie mit dem sicheren Bereich von 60 00:05:11,460 --> 00:05:14,210 Ihnen sicherstellen können, dass dies der Fall ist. 61 00:05:14,210 --> 00:05:20,050 Das bedeutet nicht, dass Sie Ihren gesamten Inhalt oder Ihre gesamte App ständig in einer 62 00:05:20,060 --> 00:05:26,930 sicheren Bereichsansicht verpacken müssen, wie Sie im nächsten Modul sehen werden, wenn wir alle über die Navigation in vielen 63 00:05:26,930 --> 00:05:33,800 Apps sprechen, die Sie tatsächlich verwenden Eine Bibliothek, die sich in vielen Fällen darum kümmert, wird die Navigationsbibliothek 64 00:05:33,830 --> 00:05:34,700 dort verwenden. 65 00:05:34,940 --> 00:05:39,980 In vielen Apps müssen Sie also nicht nur manuell verwalten, da die meisten Ihrer Apps über eine 66 00:05:39,980 --> 00:05:40,790 Navigation verfügen. 67 00:05:40,940 --> 00:05:46,460 Wenn Sie jedoch eine App erstellen, in der Sie keine andere Bibliothek haben, die sich darum kümmert, wie 68 00:05:46,460 --> 00:05:52,760 diese App, stört es Sie, wenn ich erwäge, Ihre Inhalte mit einer Ansicht für den Speicherbereich zu versehen, wenn sich die Inhalte 69 00:05:52,760 --> 00:05:53,420 ansonsten überschneiden.