Teraz jest jedna dodatkowa rzecz podczas tworzenia aplikacji mobilnych na nowoczesne telefony, które można zobaczyć tutaj
na iPhonie, który obróciłem, ma to wycięcie tutaj.
Dobrze.
Ten wycięcie może czasami nakładać się na treść.
To samo dotyczy paska wskaźnika Menedżera zadań na ekranie głównym u dołu na iPhonie.
Widzisz, że nakłada się na nasz nowy przycisk gry i tak, mogę przewijać w górę, ale odbija się do tyłu i zawsze
znajduje się powyżej tego przycisku.
Są to więc elementy mądre, które mogą zniekształcać nasz interfejs.
Na przykład, jeśli pozostawiliśmy wyrównany tekst, może on nakładać się na to wycięcie lub w tym przypadku jest to przycisk ekranu
głównego tam, gdzie jest.
Menedżer zadań to pasek wskaźników pokrywający się z naszą treścią.
I oczywiście nie dotyczy to tylko iPhone'ów.
Możesz mieć podobny problem na urządzeniach z Androidem.
Tam też masz urządzenia z wycięciem lub czymś podobnym.
Teraz, aby upewnić się, że Twoja aplikacja zawsze wygląda dobrze na wszystkich różnych urządzeniach
React Native ma specjalny komponent, możesz użyć komponentu, który automatycznie dostosowuje zawartość do ekranu Twojego
urządzenia i szanuje nacięcia i inne rzeczy.
Na przykład tutaj w grze na ekranie, gdzie mam ten problem tutaj na iPhonie, możemy zaimportować
ten specjalny komponent React Native oferty i to jest widok bezpiecznego obszaru.
Nazywa się to tak, ponieważ jest to widok zawijania, który możemy umieścić wokół naszej zawartości,
co oznacza bezpieczny obszar, w którym możemy umieścić naszą zawartość, ponieważ nie będziemy mieli problemów z wycięciami i
tak dalej.
Teraz, jak wykorzystać, aby zapisać obszar.
Po prostu weź go i owiń wokół swoich treści.
Więc wokół naszego widoku przewijania tutaj, na przykład, możemy owinąć to wszystko w grę na ekranie
z widokiem bezpiecznego obszaru, a to jest ważne.
Widoki w obszarze bezpiecznym powinny zawsze otaczać widok najwyższy.
Więc w tym przypadku ten widok przewijania tutaj jest teraz bezpieczny.
Jeśli wrócimy i przejdziemy naszą grę naprawdę szybko tutaj na iPhonie, zacznijmy nową grę. Pięćdziesiąt pięć to
liczba i rozwiązanie tego,
to, co widzicie, jest czymś interesującym, problem się pogorszył.
Na długo zanim się tym zajmiemy, proszę zauważyć, że pasek przewijania widoczny tutaj po prawej stronie
jest teraz nieco wcięty.
To nie jest całkowicie po prawej stronie i to już jest widok bezpiecznego
obszaru z pewnym efektem, który dodaje trochę dopełnienia po lewej i prawej stronie, aby upewnić się, że dobrze szanujemy wycięcie,
które zajmowałoby tam trochę miejsca i dawało nam trochę dopełnienia że nasze treści zdecydowanie nie nakładają się na siebie.
Ale oczywiście na dole mamy problem.
Powodem tego jest to, że tak naprawdę nie używam widoku obszaru zapisywania jako mojego widoku najbardziej na górze.
Więc usuńmy go stamtąd z gry na ekranie, ponieważ to jest nasz widok z góry.
Cóż, to jest koniec pliku szachów aplikacji.
Mamy tutaj treść tego widoku, w której musimy nagłówek, a następnie ładowanie przeglądarki.
Na przykład nagłówek nie jest częścią widoku obszaru zapisywania i na pewno powinien.
Zaimportujmy więc widok Bezpiecznego obszaru tutaj w pliku jazzowym aplikacji i zapakujmy go tutaj w ten sposób, więc
teraz zapiszmy go i zobaczmy liczbę, czekając na ponowne załadowanie aplikacji, a to, co widzimy, jest
puste ekran teraz rozwiązanie jest proste.
Weźmy styl, który zastosowaliśmy do ciebie i zastosuj się do obszaru Zapisz, a teraz pozbądź się tego innego
widoku.
Ponieważ teraz po prostu zastępuje nasz normalny widok tutaj i teraz działa,
a teraz przejdźmy do tej gry, szybko rozwiążmy
to, co teraz widzisz, jest martwe tutaj na dole.
Mamy teraz dodatkowe odstępy między nimi.
Chcę przejść do paska menedżera zadań tutaj i nowego przycisku gry, którego wcześniej nie mieliśmy.
Mamy również odstępy po lewej i prawej stronie, aby uszanować wycięcie, aby nigdy nie nakładało się na
treść.
Być może mamy po lewej stronie i mamy dodatkowe wypełnienie u góry iu dołu.
Teraz, oczywiście, nasz nagłówek nie wygląda super pięknie z tym dodatkowym odstępem tutaj i tak naprawdę
zajmiemy się tym w module nawigacyjnym lub faktycznie za nas.
Nie będziemy musieli wiele tam robić, ale znowu nie musimy się tym martwić.
Dlatego możemy się martwić, że nasze treści są zawsze widoczne, a dzięki
bezpiecznemu obszarowi możesz to zapewnić.
Teraz nie oznacza to, że musisz cały czas owijać całą zawartość lub całą aplikację
w bezpieczny obszar, co zobaczysz w następnym module, gdy wszyscy będziemy mówić o nawigacji w wielu aplikacjach,
z których faktycznie korzystasz. biblioteka, która dba o to w wielu przypadkach, dlatego biblioteka nawigacyjna będzie tam
używać.
Dlatego w wielu aplikacjach, ponieważ większość aplikacji ma nawigację, nie będziesz musiał zarządzać
tylko ręcznie.
Ale jeśli budujesz aplikację, w której nie ma innej biblioteki, która zajmuje się tą aplikacją, na
przykład ta aplikacja, możesz pomyśleć, kiedy rozważę zawinięcie zawartości w widok obszaru zapisywania, jeśli w przeciwnym razie zawartość się
nałoży.