1
00:00:02,530 --> 00:00:07,540
Aby dotrzeć do innych ekranów, potrzebujemy czegoś, co możemy kliknąć, a następnie dotknąć.

2
00:00:07,600 --> 00:00:12,130
Później będziemy mieli tutaj naszą siatkę kategorii i będziemy pracować nad tym również

3
00:00:12,220 --> 00:00:15,990
w tym module, ale aby rozpocząć nawigację, dodam przycisk, więc

4
00:00:16,030 --> 00:00:21,850
na ekranie kategorii, w którym mam ten tekst, chcę dodać przycisk, który mogę dotknąć, aby przejść

5
00:00:21,850 --> 00:00:23,510
do ekranu kategorii posiłków.

6
00:00:23,980 --> 00:00:34,440
Więc tutaj dodam ten przycisk React Native, ten, który jest wbudowany i ustawia tytuł przejść do posiłków, a kiedy

7
00:00:34,600 --> 00:00:41,630
naciśniemy ten przycisk, chcę uruchomić funkcję, która faktycznie prowadzi mnie do ekranu

8
00:00:41,660 --> 00:00:42,890
kategorii posiłków.

9
00:00:42,890 --> 00:00:45,610
Teraz ustawiliśmy tutaj ekran tej

10
00:00:45,620 --> 00:00:53,040
kategorii posiłków, ale jak możemy teraz do niego przejść? Cóż, w tym celu ważne jest, aby wiedzieć, że

11
00:00:53,040 --> 00:01:00,360
każdy komponent załadowany za pomocą nawigacji React automatycznie otrzymuje specjalny rekwizyt, więc każdy komponent mapowany na jeden z

12
00:01:00,360 --> 00:01:02,550
identyfikatorów ekranu tutaj, więc w

13
00:01:02,550 --> 00:01:09,390
tym przypadku te trzy komponenty otrzymają specjalny rekwizyt Zagnieżdżone tam komponenty nie otrzymują automatycznie,

14
00:01:09,390 --> 00:01:14,850
tylko komponenty najwyższego poziomu, które zostały zamapowane na identyfikatory w nawigatorach.

15
00:01:14,850 --> 00:01:16,800
Więc to jest specjalny rekwizyt, o którym mówię,

16
00:01:16,800 --> 00:01:17,810
spójrzmy na to.

17
00:01:17,820 --> 00:01:23,790
Więc tutaj w rekwizytach, możemy go wyodrębnić i po prostu zacznijmy od rekwizytów rejestrujących w konsoli tutaj,

18
00:01:23,790 --> 00:01:27,510
abyśmy mogli uzyskać pomysł i na razie, abyśmy nie otrzymali błędu,

19
00:01:27,510 --> 00:01:30,480
po prostu przekażę tutaj pustą funkcję onPress .

20
00:01:30,480 --> 00:01:33,600
Zapiszmy to i zobaczmy, co jest w rekwizytach.

21
00:01:33,690 --> 00:01:39,660
Po przeładowaniu mamy przycisk, który nic nie robi, a tutaj w konsoli widzimy, że rekwizyty nie

22
00:01:39,720 --> 00:01:40,800
są puste.

23
00:01:40,800 --> 00:01:42,030
To jest

24
00:01:42,030 --> 00:01:48,400
nasz obiekt rekwizytów, a tam mamy rekwizyt nawigacyjny, który sam jest obiektem, który

25
00:01:48,420 --> 00:01:58,980
ma pewne akcje, dobrze, ale także ma na przykład funkcję pop, push, replace, reset i nawigację, więc jest tam kilka funkcji, funkcje

26
00:01:58,980 --> 00:02:03,090
które pomagają nam poruszać się po naszej aplikacji.

27
00:02:03,450 --> 00:02:09,670
Ma również rekwizyty ekranowe, więc nasz rekwizyt ma rekwizyty ekranowe, które na razie możemy zignorować.

28
00:02:09,690 --> 00:02:17,160
Więc to, co jest w środku rekwizytów i ten rekwizyt nawigacyjny, ta część nawigacyjna, która

29
00:02:17,520 --> 00:02:18,680
tam jest,

30
00:02:18,690 --> 00:02:25,350
naprawdę nam pomaga, więc ten rekwizyt nawigacyjny. Pomaga nam tutaj, ponieważ kiedy naciśniemy ten przycisk i zrobię

31
00:02:25,370 --> 00:02:30,270
to za pomocą wbudowanej funkcji strzałki tutaj, oczywiście możesz mieć oddzielną funkcję, którą tworzysz i

32
00:02:30,270 --> 00:02:32,010
którą następnie mapujesz na

33
00:02:32,010 --> 00:02:35,430
onPress, to pomaga nam i można z niej korzystać nawigować.

34
00:02:35,490 --> 00:02:42,210
Tak więc w przypadku nawigacji rekwizytów nawigacja jest tym specjalnym rekwizytem, który otrzymujemy dzięki nawigacji React,

35
00:02:42,210 --> 00:02:46,390
ponieważ załadowaliśmy ten element ekranu kategorii za pomocą naszego

36
00:02:46,740 --> 00:02:50,900
nawigatora tutaj, ten specjalny rekwizyt nawigacyjny ma metodę nawigacji

37
00:02:50,910 --> 00:02:53,040
i jest to twoja

38
00:02:53,040 --> 00:03:01,620
główna metoda, najważniejsza metoda poruszania się za pomocą nawigacji React. Jak działa nawigacja?

39
00:03:02,490 --> 00:03:12,040
Nawigacja bierze obiekt jako argument iw tym obiekcie możesz ustawić nazwę trasy, do której chcesz

40
00:03:12,040 --> 00:03:13,150
nawigować.

41
00:03:13,240 --> 00:03:19,720
Więc przekazujesz właściwość nazwy trasy w tym obiekcie, którą przekazujesz do nawigacji, a teraz ważne, nazwa

42
00:03:19,720 --> 00:03:25,540
trasy, którą tu podajesz, musi być jedną z trzech nazw tras, które tu ustawiłem.

43
00:03:25,720 --> 00:03:31,450
Teraz nazwy tras są identyfikatorami, które wyświetlasz przed tymi dwukropkami, więc nazwy właściwości w

44
00:03:31,450 --> 00:03:34,420
tym obiekcie przekazałeś, aby utworzyć nawigator stosów.

45
00:03:34,420 --> 00:03:36,660
To są nazwy twoich tras

46
00:03:36,670 --> 00:03:42,900
i możesz ich teraz używać do nawigacji. Więc tutaj chcę przejść do kategorii posiłków,

47
00:03:42,900 --> 00:03:44,690
to jest nazwa

48
00:03:44,690 --> 00:03:48,340
trasy, której chcę użyć, więc tutaj wskazuję kategorie

49
00:03:48,410 --> 00:03:56,000
posiłków, ale nie tak, to w JavaScript szukałoby zmiennej kategorii posiłków, zamiast łańcucha o nazwie kategorie posiłków,

50
00:03:56,180 --> 00:04:02,450
ponieważ po prostu powie w końcu Javascript i React nawigację, że chcesz udać się

51
00:04:02,450 --> 00:04:08,470
na trasę, która ma nazwę kategorii posiłków i to jest ta trasa tutaj.

52
00:04:08,470 --> 00:04:10,720
Więc teraz możesz się tam dostać.

53
00:04:13,730 --> 00:04:21,530
Jeśli teraz to zapiszemy i klikniemy tutaj przejdź do posiłków, zobaczysz, że przechodzimy do ekranu posiłku, otrzymujemy tę fajną

54
00:04:21,530 --> 00:04:27,020
animację z pudełka, otrzymujemy ten przycisk powrotu, który wygląda dokładnie tak, jak byśmy

55
00:04:27,020 --> 00:04:33,650
oczekiwali iOS i wszystko to działa od razu po wyjęciu z pudełka, bez dodatkowej pracy, bez zaznaczenia,

56
00:04:33,650 --> 00:04:38,890
bez ręcznego kodu animacji, wyciągamy to z pudełka dzięki bibliotece nawigacyjnej React.

57
00:04:38,990 --> 00:04:45,800
Dzięki temu możemy przejść do naszego ekranu posiłków, do ekranu kategorii posiłków, a następnie z powrotem do ekranu

58
00:04:45,800 --> 00:04:52,130
kategorii i działa to również na Androidzie. Dostajemy specyficzną dla Androida nawigację routingu, która wygląda

59
00:04:52,400 --> 00:04:57,620
nieco inaczej niż na iOS, jest to animacja nawigacji, której można się spodziewać na

60
00:04:57,620 --> 00:05:01,550
Androidzie, oczywiście można również użyć przycisku Wstecz urządzenia, aby wrócić.

61
00:05:01,550 --> 00:05:08,600
W ten sposób możesz przejść do innego ekranu i pamiętaj, że nawigacja oczywiście nie mówi nic

62
00:05:08,600 --> 00:05:15,530
o kierunku, w którym chcemy iść, nie mówi React nawigacji, czy powinna odtwarzać tę animację

63
00:05:15,530 --> 00:05:22,490
do przodu, czy animację do tyłu . Nawigacja React automatycznie to wykrywa, ponieważ pod

64
00:05:22,550 --> 00:05:29,120
maską zarządza tym stosem stron, o których mówiłem, tym stosem ekranów i tym stosem,

65
00:05:29,120 --> 00:05:35,060
właśnie teraz, gdy uruchamiamy aplikację, mamy tylko ekran kategorii, ale po naciśnięciu

66
00:05:35,420 --> 00:05:42,050
tego przycisku , nawigacja w końcu mówi React nawigacja, że skoro robimy to wewnątrz

67
00:05:42,050 --> 00:05:47,570
komponentu, który został załadowany nawigatorem stosów, chcemy przejść do innego ekranu,

68
00:05:47,600 --> 00:05:53,810
który powinien zostać przesunięty na stos. Jest to po prostu zachowanie domyślne i dlatego wie, że

69
00:05:53,840 --> 00:05:59,690
chce iść naprzód, ponieważ nowa trasa została wypchnięta, co oznacza, że została dodana do stosu, chcemy iść naprzód, a

70
00:05:59,690 --> 00:06:06,080
kiedy klikamy przycisk Wstecz, który dodaje automatycznie, oznacza to, że zrzuca ten ekran ze stosu, a ponieważ usuwa coś ze

71
00:06:06,170 --> 00:06:10,700
stosu, wie, że powinien odtworzyć animację. Tak właśnie dzieje się

72
00:06:10,700 --> 00:06:14,870
za kulisami, tak naprawdę nie musisz się tym martwić, i

73
00:06:14,960 --> 00:06:20,330
to jest dobra rzecz, chcę tylko, abyś był tego świadomy, że nawigacja

74
00:06:20,330 --> 00:06:27,980
React wykonuje tam ciężkie działania i zarządza tym stosem ekran i odpowiednie animacje, których potrzebujesz, dlatego pod maską.

75
00:06:28,120 --> 00:06:32,990
Okej, więc to pozwala nam iść tam iz powrotem, tam iz powrotem.

76
00:06:32,990 --> 00:06:39,260
Teraz Twoim wyzwaniem na następny wykład, w którym to zrobimy razem, jest to, że zrobisz

77
00:06:39,260 --> 00:06:44,270
to samo na ekranie kategorii posiłków i upewnisz się, że możemy

78
00:06:44,270 --> 00:06:47,990
także przejść do MealDetailScreen. Nie powinno to być zbyt trudne, w następnym wykładzie zrobimy to razem.