1
00:00:02,280 --> 00:00:03,340
Teraz się wyloguj.

2
00:00:04,290 --> 00:00:06,840
Potrzebujemy nowej akcji, którą możemy wysłać.

3
00:00:07,230 --> 00:00:10,140
Więc w pliku wyłączonym, w folderze akcji.

4
00:00:11,760 --> 00:00:14,020
Dodam nowego twórcę akcji.

5
00:00:14,050 --> 00:00:21,610
Czy to naprawdę ważne, gdzie dodałeś, dodałem tam i eksportuję go i nazywam wylogowaniem, co brzmi dla mnie

6
00:00:22,300 --> 00:00:23,650
jak odpowiednia nazwa.

7
00:00:26,330 --> 00:00:27,710
Nie oczekuję żadnych argumentów.

8
00:00:28,250 --> 00:00:31,180
Potrzebuję jednak identyfikatora akcji do wylogowania.

9
00:00:31,220 --> 00:00:33,410
Więc tutaj możemy eksportować.

10
00:00:36,310 --> 00:00:40,030
Koncert wyloguj się za pomocą łańcucha wylogowania.

11
00:00:41,300 --> 00:00:42,850
A teraz stoisz tam.

12
00:00:43,270 --> 00:00:48,510
I w tym kreatorze akcji, który jest normalnym kreatorem akcji, w którym nie muszę wysyłać

13
00:00:48,520 --> 00:00:54,460
żadnych żądań HTP ani nic podobnego, właśnie wysłałem jego akcję wylogowania Yende, w której tworzę ten obiekt akcji

14
00:00:54,460 --> 00:00:55,000
wylogowania.

15
00:00:57,410 --> 00:00:58,520
Teraz możemy użyć taty.

16
00:00:59,540 --> 00:01:04,130
I chcę móc się wylogować za pomocą strony, narysować stronę, narysować.

17
00:01:04,190 --> 00:01:06,590
Chcę mieć ten przycisk wylogowania.

18
00:01:06,860 --> 00:01:09,650
Oznacza to, że musimy zrobić coś, czego wcześniej nie robiliśmy.

19
00:01:10,460 --> 00:01:13,210
Musimy dodać nowy przycisk, aby zdecydować o losowaniu.

20
00:01:13,370 --> 00:01:16,030
Do tej pory dodajemy tylko automatycznie utworzone przyciski.

21
00:01:17,850 --> 00:01:21,470
Ale dodawanie własnych treści nie jest zbyt trudne dla taty.

22
00:01:21,540 --> 00:01:24,410
Przejdźmy do pliku Shop Navigator, w którym ustawiliśmy szufladę.

23
00:01:25,080 --> 00:01:25,740
Oto jest.

24
00:01:27,560 --> 00:01:30,800
A potem tutaj, oprócz moich opcji treści.

25
00:01:31,800 --> 00:01:34,770
Możesz również dodać składnik treści tutaj.

26
00:01:36,290 --> 00:01:41,630
Pozwala to dodawać własne treści do decyzji lub zamiast treści domyślnych.

27
00:01:42,320 --> 00:01:46,790
Teraz bierze to funkcję, która odbiera rekwizyty, ponieważ w końcu jest to składnik reagujący, który

28
00:01:46,790 --> 00:01:47,450
tutaj dodajesz.

29
00:01:48,850 --> 00:01:54,280
Dostaje rekwizyty i zeznania podatkowe, jestem J. S. X i każdy musi upewnić się, że importujesz

30
00:01:54,280 --> 00:01:55,300
reaguje od reakcji.

31
00:01:55,690 --> 00:01:57,670
I wszyscy będziemy potrzebować kilku innych importów.

32
00:01:58,960 --> 00:02:01,250
Musimy również zaimportować coś z native speakera.

33
00:02:01,270 --> 00:02:03,160
I to powinien być widok bezpiecznego obszaru.

34
00:02:04,580 --> 00:02:09,380
Chcę też zaimportować przycisk z natywnego REAC.

35
00:02:11,000 --> 00:02:16,550
Ponadto z REACT Navigation musimy zaimportować elementy szuflady.

36
00:02:18,060 --> 00:02:20,080
I znowu bardzo rodzimy.

37
00:02:20,340 --> 00:02:21,300
Muszę też zobaczyć.

38
00:02:22,960 --> 00:02:27,970
Po zaimportowaniu przejdźmy do naszego nowo dodanego komponentu treści.

39
00:02:28,930 --> 00:02:35,140
I tutaj możemy teraz zwrócić widok w stylu flex.

40
00:02:35,470 --> 00:02:36,940
Możesz oczywiście również dodać arkusz stylów.

41
00:02:36,970 --> 00:02:38,950
Dodam tylko styl inline.

42
00:02:39,130 --> 00:02:42,860
Nawiasem mówiąc, ten komponent może oczywiście również znajdować się w osobnym pliku.

43
00:02:42,880 --> 00:02:45,850
Tej jesieni nie trzeba go tworzyć w locie.

44
00:02:47,620 --> 00:02:55,870
Teraz w tym widoku chcę mieć widok bezpiecznego obszaru i upewnij się, że zawsze dodajesz wstawkę

45
00:02:56,710 --> 00:02:58,540
siły równą górze.

46
00:02:59,890 --> 00:03:01,060
Poziomy.

47
00:03:01,510 --> 00:03:03,970
Nigdy, a to tylko kontroluje, jak to jest ułożone.

48
00:03:05,330 --> 00:03:07,620
I w tym bezpiecznym widoku.

49
00:03:08,850 --> 00:03:16,020
Powinieneś teraz dodać do rysowania elementy, ważne przekazywanie do nich rekwizytów, ponieważ są to domyślne renderowane

50
00:03:16,020 --> 00:03:17,400
elementy szuflady.

51
00:03:17,450 --> 00:03:18,780
I tak powinno być nadal.

52
00:03:19,200 --> 00:03:24,850
Aby je poprawnie skonfigurować, musisz przekazać rekwizyty, które w końcu minęły i reagować nawigacją i

53
00:03:24,850 --> 00:03:28,410
utrzymywać cały kontakt z losowaniem i tak dalej.

54
00:03:29,040 --> 00:03:31,680
A teraz możesz tutaj dodać własny przedmiot do losowania.

55
00:03:32,130 --> 00:03:37,510
I będzie ten przycisk, domyślnie natywny przycisk reagowania, w którym mówię wylogowanie.

56
00:03:38,510 --> 00:03:45,580
Tam, gdzie chcę dodać kolor, powiedzmy, kolory, kropkę podstawową i zużycie na prasie.

57
00:03:45,640 --> 00:03:48,100
Chcę teraz wysłać tę akcję wylogowania.

58
00:03:49,640 --> 00:03:51,440
A teraz będziemy mieli ogromny problem.

59
00:03:52,220 --> 00:03:54,160
Jak nas stąd wysłać?

60
00:03:54,400 --> 00:03:56,870
Przede wszystkim, jeśli to uratujesz, powinieneś to zobaczyć.

61
00:03:56,900 --> 00:04:00,050
Więc tutaj, jeśli rozwiniesz losowanie, oto przycisk wylogowania.

62
00:04:00,140 --> 00:04:00,350
Dobrze.

63
00:04:00,380 --> 00:04:01,220
Więc to działa.

64
00:04:01,460 --> 00:04:04,250
I oczywiście możesz stylizować i pozycjonować tak, jak chcesz.

65
00:04:06,680 --> 00:04:08,400
A tak przy okazji, wystarczy dwukrotnie sprawdzić.

66
00:04:08,420 --> 00:04:11,540
Możemy to również zobaczyć na Androidzie, jeśli się tam zalogujemy.

67
00:04:16,210 --> 00:04:18,580
Tutaj w szufladzie wszyscy robimy to po wylogowaniu.

68
00:04:20,120 --> 00:04:20,540
Przycisk.

69
00:04:22,280 --> 00:04:25,840
Nawiasem mówiąc, możemy chcieć dodać nieco więcej wypełnienia u góry.

70
00:04:27,800 --> 00:04:29,590
Ale jak możemy wysłać wszystko?

71
00:04:29,750 --> 00:04:32,120
Dodam tutaj dodatkowe wypełnienie.

72
00:04:34,060 --> 00:04:34,990
Z 20

73
00:04:38,300 --> 00:04:43,520
Ponieważ mój widok bezpiecznego obszaru działa, ale nie pozostawia więcej odstępu niż potrzebuję.

74
00:04:43,790 --> 00:04:48,110
Tak więc, aby uzyskać dodatkowe odstępy, trochę wyściółki nie zaszkodzi.

75
00:04:50,880 --> 00:04:51,750
Myślę, że tak jest lepiej.

76
00:04:52,260 --> 00:04:56,010
Ale znowu, w jaki sposób możemy teraz upewnić się, że możemy wysłać akcję tutaj?

77
00:04:57,360 --> 00:04:59,210
To jest składnik reagujący, prawda?

78
00:04:59,880 --> 00:05:03,570
W końcu możemy po prostu użyć tutaj wysyłki.

79
00:05:05,770 --> 00:05:07,060
Więc możemy importować.

80
00:05:09,150 --> 00:05:10,530
Skorzystaj z wysyłki tutaj.

81
00:05:11,620 --> 00:05:13,150
Od React redux.

82
00:05:13,240 --> 00:05:19,210
Więc to, co zrobiliśmy wcześniej i wykorzystaliśmy tutaj, ponieważ możesz użyć tego haka na dowolnym elemencie, a to

83
00:05:19,210 --> 00:05:20,260
tylko element.

84
00:05:22,250 --> 00:05:24,540
Więc każdy rok przed naszym powrotem to X.

85
00:05:24,830 --> 00:05:30,920
Mogę uzyskać dostęp do mojej funkcji wysyłania za pomocą funkcji wysyłania i na razie tutaj, po

86
00:05:30,920 --> 00:05:36,020
naciśnięciu tego przycisku, możemy wywołać wysyłkę i wysłać akcję wyłączenia dla taty.

87
00:05:36,050 --> 00:05:38,090
Oczywiście musisz tylko upewnić się, że go importujesz.

88
00:05:38,810 --> 00:05:49,330
Więc zaimportuj wszystko z akcji z folderu sklepu, folder akcji zrób cały plik, a teraz użyj wszystkich akcji,

89
00:05:49,330 --> 00:05:52,400
aby utworzyć tutaj martwą akcję.

90
00:05:52,430 --> 00:05:53,410
Wszystkie działania zapisane.

91
00:05:53,420 --> 00:05:54,200
Wyloguj.

92
00:05:54,560 --> 00:05:55,780
Wyloguj się w ten sposób.

93
00:05:57,230 --> 00:05:59,160
I to powinno wysłać do wylogowania.

94
00:05:59,700 --> 00:06:05,860
Poza tym chcę również nawigować dalej, abyśmy mogli nawigować po kropkach za pomocą nawigacji rekwizytów.

95
00:06:06,240 --> 00:06:10,440
To będzie dostępne tutaj i wróć tutaj do ekranu wyłączonego.

96
00:06:11,190 --> 00:06:14,580
Więc w zasadzie to tutaj poza ekranem i nawigator przełączników.

97
00:06:14,900 --> 00:06:17,050
Nasze losowanie jest częścią Nawigatora sklepu.

98
00:06:17,250 --> 00:06:19,770
Stąd też możemy przejść do ekranu off.

99
00:06:21,540 --> 00:06:26,850
Teraz, gdy wysyłamy wylogowanie, chcę się upewnić, że w reduktorze też coś robimy.

100
00:06:27,240 --> 00:06:30,660
Mamy tutaj naszego twórcę akcji wylogowania.

101
00:06:30,930 --> 00:06:35,720
Więc w reduktorze i zaoferowałeś użytkownikowi chciałeś nową skrzynkę do wylogowania.

102
00:06:35,750 --> 00:06:39,060
A dla taty upewnij się, że importujesz identyfikator wylogowania.

103
00:06:39,900 --> 00:06:41,380
I oczywiście tutaj jest to bardzo proste.

104
00:06:41,400 --> 00:06:46,440
Zwracam swój stan początkowy, co na końcu oznacza, że token został zresetowany, a użytkownik I. RE. jest resetowany.

105
00:06:48,300 --> 00:06:49,510
A teraz spróbujmy.

106
00:06:49,540 --> 00:06:56,050
Jeśli wrócę tutaj i kliknę wyloguj się, wrócę do ekranu wyłączonego, więc to działa.

107
00:06:56,350 --> 00:06:58,180
Spróbujmy także na Androidzie.

108
00:07:01,330 --> 00:07:03,790
Kliknij Wyloguj się tutaj, wróciliśmy.

109
00:07:04,480 --> 00:07:05,470
To działa.

110
00:07:06,250 --> 00:07:07,930
Jesteśmy prawie z tym.

111
00:07:08,650 --> 00:07:15,640
Ale powinniśmy również zostać automatycznie zablokowani, jeśli token wygasł, ponieważ ma datę ważności.

112
00:07:15,820 --> 00:07:18,250
W tej chwili nie mamy automatycznego wygaśnięcia.