Jetzt gibt es eine zusätzliche Sache beim Erstellen von mobilen Apps für moderne Telefone. Wir können dies hier auf dem iPhone
sehen, das ich gedreht habe. Es hat diese Kerbe hier.
Richtig.
Und diese Kerbe kann manchmal Ihren Inhalt überlappen.
Gleiches gilt für diese Task-Manager-Anzeigeleiste auf dem Startbildschirm hier unten auf dem iPhone.
Sie sehen, es überlappt unsere neue Spielschaltfläche und ja, ich kann nach oben scrollen, aber es springt zurück und befindet
sich immer über dieser Schaltfläche.
Das sind also Elemente, die Teil der Weisheit sind, die unsere Schnittstelle verzerren können.
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,
auf der er sich befindet.
Nun, Task-Manager ist, welche Indikatorleiste unseren Inhalt überlappt.
Und das ist natürlich nicht nur bei iPhones der Fall.
Auf Android-Geräten kann ein ähnliches Problem auftreten.
Dort haben Sie auch Geräte mit einer Kerbe oder mit so etwas.
Um sicherzustellen, dass Ihre App auf allen verschiedenen Geräten immer gut aussieht, können Sie
mit React Native eine spezielle Komponente verwenden, die Ihre Inhalte automatisch an den Bildschirm Ihres Geräts
anpasst und Kerben und andere Dinge berücksichtigt.
Zum Beispiel können wir hier im Spiel über dem Bildschirm, wo ich dieses Problem hier auf dem iPhone habe, diese
spezielle Komponente importieren, die React Native anbietet, und das ist die Ansicht des sicheren Bereichs.
Es wird so genannt, weil es eine Wrapping-Ansicht ist, die wir um unseren Inhalt legen können und die
den sicheren Bereich markiert, in dem wir unseren Inhalt positionieren können, weil wir dort keine Probleme mit Kerben haben und
so weiter.
Wie können Sie nun den Bereich von speichern?
Sie nehmen es einfach und wickeln es um Ihren Inhalt.
Um unsere Bildlaufansicht hier herum können wir beispielsweise all das auf dem Spiel über dem Bildschirm mit der
Ansicht des sicheren Bereichs umhüllen, und das ist übrigens wichtig.
Ansichten für sichere Bereiche sollten immer Ihre oberste Ansicht einschließen.
In diesem Fall ist diese Bildlaufansicht hier also jetzt so sicher.
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
und lösen Sie dieses Problem.
Dann ist das, was Sie sehen, etwas Interessantes. Das Problem wurde noch schlimmer.
Bevor wir uns darum kümmern, beachten Sie bitte, dass diese Bildlaufleiste, die Sie hier rechts sehen, jetzt tatsächlich
ein wenig eingerückt ist.
Es ist nicht ganz rechts und das ist bereits eine sichere Bereichsansicht
mit einem Effekt, der links und rechts etwas Polsterung hinzufügt, um sicherzustellen, dass wir die Kerbe respektieren, die dort etwas
Platz beanspruchen würde, und uns etwas Polsterung geben dass unser Inhalt definitiv nicht von der Kerbe überlappt wird.
Aber natürlich haben wir unten ein Problem.
Grund dafür ist, dass ich die Ansicht zum Speichern des Bereichs nicht wirklich als meine oberste Ansicht verwende.
Also lasst es uns von dort aus über den Bildschirm aus dem Spiel entfernen, denn was ist unsere Draufsicht.
Nun, das steht am Ende in der App-Schachdatei.
Wir haben unseren Inhalt dieser Ansicht hier, wo wir Header und dann den Viewer laden müssen.
So ist beispielsweise die Kopfzeile nicht Teil seiner Ansicht zum Speichern des Bereichs und sollte es auf jeden Fall sein.
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
jetzt und lassen Sie uns eine Nummer mit dem Warten auf das Neuladen der App und dem, was wir sehen,
leer sehen Bildschirm jetzt Lösung ist einfach.
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
andere Ansicht.
Weil es jetzt nur unsere normale Ansicht hier ersetzt und jetzt funktioniert und jetzt
gehen wir noch einmal zu diesem Spiel. Lösen wir
schnell das, was Sie jetzt sehen, ist hier unten tot.
Wir haben jetzt einen zusätzlichen Abstand dazwischen.
Ich möchte hier zur Task-Manager-Leiste und zur neuen Spielschaltfläche gehen, die wir vorher nicht hatten.
Wir haben hier auch den Abstand links und rechts, um die Kerbe zu berücksichtigen, damit sich der Inhalt nie
überschneidet.
Wir haben dort vielleicht links und wir haben oben und unten eine zusätzliche Polsterung.
Natürlich sieht unser Header mit diesem zusätzlichen Abstand hier nicht besonders schön aus, und darum kümmern
wir uns im Navigationsmodul, oder wir kümmern uns um uns.
Wir werden dort nicht viel tun müssen, aber auch hier müssen wir uns keine Sorgen machen.
Wir können uns daher Sorgen machen, dass unser Inhalt immer sichtbar ist und Sie mit dem sicheren Bereich von
Ihnen sicherstellen können, dass dies der Fall ist.
Das bedeutet nicht, dass Sie Ihren gesamten Inhalt oder Ihre gesamte App ständig in einer
sicheren Bereichsansicht verpacken müssen, wie Sie im nächsten Modul sehen werden, wenn wir alle über die Navigation in vielen
Apps sprechen, die Sie tatsächlich verwenden Eine Bibliothek, die sich in vielen Fällen darum kümmert, wird die Navigationsbibliothek
dort verwenden.
In vielen Apps müssen Sie also nicht nur manuell verwalten, da die meisten Ihrer Apps über eine
Navigation verfügen.
Wenn Sie jedoch eine App erstellen, in der Sie keine andere Bibliothek haben, die sich darum kümmert, wie
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
ansonsten überschneiden.