1
00:00:02,310 --> 00:00:09,750
Teraz jest jedna dodatkowa rzecz podczas tworzenia aplikacji mobilnych na nowoczesne telefony, które można zobaczyć tutaj

2
00:00:09,810 --> 00:00:13,880
na iPhonie, który obróciłem, ma to wycięcie tutaj.

3
00:00:13,890 --> 00:00:14,520
Dobrze.

4
00:00:14,580 --> 00:00:19,380
Ten wycięcie może czasami nakładać się na treść.

5
00:00:19,380 --> 00:00:26,010
To samo dotyczy paska wskaźnika Menedżera zadań na ekranie głównym u dołu na iPhonie.

6
00:00:26,010 --> 00:00:32,280
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

7
00:00:32,370 --> 00:00:33,990
znajduje się powyżej tego przycisku.

8
00:00:33,990 --> 00:00:40,370
Są to więc elementy mądre, które mogą zniekształcać nasz interfejs.

9
00:00:40,380 --> 00:00:47,310
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

10
00:00:47,370 --> 00:00:48,930
głównego tam, gdzie jest.

11
00:00:49,290 --> 00:00:54,250
Menedżer zadań to pasek wskaźników pokrywający się z naszą treścią.

12
00:00:54,660 --> 00:00:57,090
I oczywiście nie dotyczy to tylko iPhone'ów.

13
00:00:57,090 --> 00:00:59,760
Możesz mieć podobny problem na urządzeniach z Androidem.

14
00:00:59,780 --> 00:01:04,080
Tam też masz urządzenia z wycięciem lub czymś podobnym.

15
00:01:04,140 --> 00:01:11,640
Teraz, aby upewnić się, że Twoja aplikacja zawsze wygląda dobrze na wszystkich różnych urządzeniach

16
00:01:11,640 --> 00:01:19,680
React Native ma specjalny komponent, możesz użyć komponentu, który automatycznie dostosowuje zawartość do ekranu Twojego

17
00:01:19,680 --> 00:01:23,830
urządzenia i szanuje nacięcia i inne rzeczy.

18
00:01:23,850 --> 00:01:29,280
Na przykład tutaj w grze na ekranie, gdzie mam ten problem tutaj na iPhonie, możemy zaimportować

19
00:01:29,310 --> 00:01:33,750
ten specjalny komponent React Native oferty i to jest widok bezpiecznego obszaru.

20
00:01:34,080 --> 00:01:41,640
Nazywa się to tak, ponieważ jest to widok zawijania, który możemy umieścić wokół naszej zawartości,

21
00:01:41,780 --> 00:01:50,430
co oznacza bezpieczny obszar, w którym możemy umieścić naszą zawartość, ponieważ nie będziemy mieli problemów z wycięciami i

22
00:01:50,460 --> 00:01:51,660
tak dalej.

23
00:01:51,660 --> 00:01:53,770
Teraz, jak wykorzystać, aby zapisać obszar.

24
00:01:53,780 --> 00:01:57,590
Po prostu weź go i owiń wokół swoich treści.

25
00:01:57,600 --> 00:02:04,710
Więc wokół naszego widoku przewijania tutaj, na przykład, możemy owinąć to wszystko w grę na ekranie

26
00:02:04,710 --> 00:02:08,660
z widokiem bezpiecznego obszaru, a to jest ważne.

27
00:02:08,660 --> 00:02:12,640
Widoki w obszarze bezpiecznym powinny zawsze otaczać widok najwyższy.

28
00:02:12,650 --> 00:02:17,170
Więc w tym przypadku ten widok przewijania tutaj jest teraz bezpieczny.

29
00:02:17,180 --> 00:02:26,140
Jeśli wrócimy i przejdziemy naszą grę naprawdę szybko tutaj na iPhonie, zacznijmy nową grę. Pięćdziesiąt pięć to

30
00:02:26,140 --> 00:02:28,480
liczba i rozwiązanie tego,

31
00:02:33,070 --> 00:02:38,200
to, co widzicie, jest czymś interesującym, problem się pogorszył.

32
00:02:38,200 --> 00:02:45,910
Na długo zanim się tym zajmiemy, proszę zauważyć, że pasek przewijania widoczny tutaj po prawej stronie

33
00:02:45,910 --> 00:02:48,040
jest teraz nieco wcięty.

34
00:02:48,040 --> 00:02:53,500
To nie jest całkowicie po prawej stronie i to już jest widok bezpiecznego

35
00:02:53,500 --> 00:03:01,840
obszaru z pewnym efektem, który dodaje trochę dopełnienia po lewej i prawej stronie, aby upewnić się, że dobrze szanujemy wycięcie,

36
00:03:01,840 --> 00:03:09,730
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.

37
00:03:09,730 --> 00:03:13,030
Ale oczywiście na dole mamy problem.

38
00:03:13,030 --> 00:03:18,040
Powodem tego jest to, że tak naprawdę nie używam widoku obszaru zapisywania jako mojego widoku najbardziej na górze.

39
00:03:18,040 --> 00:03:22,930
Więc usuńmy go stamtąd z gry na ekranie, ponieważ to jest nasz widok z góry.

40
00:03:23,020 --> 00:03:26,190
Cóż, to jest koniec pliku szachów aplikacji.

41
00:03:26,230 --> 00:03:33,750
Mamy tutaj treść tego widoku, w której musimy nagłówek, a następnie ładowanie przeglądarki.

42
00:03:33,770 --> 00:03:39,100
Na przykład nagłówek nie jest częścią widoku obszaru zapisywania i na pewno powinien.

43
00:03:39,110 --> 00:03:49,130
Zaimportujmy więc widok Bezpiecznego obszaru tutaj w pliku jazzowym aplikacji i zapakujmy go tutaj w ten sposób, więc

44
00:03:49,130 --> 00:03:58,760
teraz zapiszmy go i zobaczmy liczbę, czekając na ponowne załadowanie aplikacji, a to, co widzimy, jest

45
00:03:58,850 --> 00:04:02,750
puste ekran teraz rozwiązanie jest proste.

46
00:04:02,780 --> 00:04:08,360
Weźmy styl, który zastosowaliśmy do ciebie i zastosuj się do obszaru Zapisz, a teraz pozbądź się tego innego

47
00:04:08,380 --> 00:04:08,980
widoku.

48
00:04:08,990 --> 00:04:15,090
Ponieważ teraz po prostu zastępuje nasz normalny widok tutaj i teraz działa,

49
00:04:15,180 --> 00:04:19,590
a teraz przejdźmy do tej gry, szybko rozwiążmy

50
00:04:23,720 --> 00:04:28,160
to, co teraz widzisz, jest martwe tutaj na dole.

51
00:04:28,160 --> 00:04:30,960
Mamy teraz dodatkowe odstępy między nimi.

52
00:04:31,100 --> 00:04:36,700
Chcę przejść do paska menedżera zadań tutaj i nowego przycisku gry, którego wcześniej nie mieliśmy.

53
00:04:36,740 --> 00:04:42,350
Mamy również odstępy po lewej i prawej stronie, aby uszanować wycięcie, aby nigdy nie nakładało się na

54
00:04:42,350 --> 00:04:42,790
treść.

55
00:04:42,800 --> 00:04:48,690
Być może mamy po lewej stronie i mamy dodatkowe wypełnienie u góry iu dołu.

56
00:04:48,770 --> 00:04:56,180
Teraz, oczywiście, nasz nagłówek nie wygląda super pięknie z tym dodatkowym odstępem tutaj i tak naprawdę

57
00:04:56,180 --> 00:05:01,270
zajmiemy się tym w module nawigacyjnym lub faktycznie za nas.

58
00:05:01,280 --> 00:05:05,690
Nie będziemy musieli wiele tam robić, ale znowu nie musimy się tym martwić.

59
00:05:05,690 --> 00:05:11,460
Dlatego możemy się martwić, że nasze treści są zawsze widoczne, a dzięki

60
00:05:11,460 --> 00:05:14,210
bezpiecznemu obszarowi możesz to zapewnić.

61
00:05:14,210 --> 00:05:20,050
Teraz nie oznacza to, że musisz cały czas owijać całą zawartość lub całą aplikację

62
00:05:20,060 --> 00:05:26,930
w bezpieczny obszar, co zobaczysz w następnym module, gdy wszyscy będziemy mówić o nawigacji w wielu aplikacjach,

63
00:05:26,930 --> 00:05:33,800
z których faktycznie korzystasz. biblioteka, która dba o to w wielu przypadkach, dlatego biblioteka nawigacyjna będzie tam

64
00:05:33,830 --> 00:05:34,700
używać.

65
00:05:34,940 --> 00:05:39,980
Dlatego w wielu aplikacjach, ponieważ większość aplikacji ma nawigację, nie będziesz musiał zarządzać

66
00:05:39,980 --> 00:05:40,790
tylko ręcznie.

67
00:05:40,940 --> 00:05:46,460
Ale jeśli budujesz aplikację, w której nie ma innej biblioteki, która zajmuje się tą aplikacją, na

68
00:05:46,460 --> 00:05:52,760
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ę

69
00:05:52,760 --> 00:05:53,420
nałoży.