Teraz się wyloguj.
Potrzebujemy nowej akcji, którą możemy wysłać.
Więc w pliku wyłączonym, w folderze akcji.
Dodam nowego twórcę akcji.
Czy to naprawdę ważne, gdzie dodałeś, dodałem tam i eksportuję go i nazywam wylogowaniem, co brzmi dla mnie
jak odpowiednia nazwa.
Nie oczekuję żadnych argumentów.
Potrzebuję jednak identyfikatora akcji do wylogowania.
Więc tutaj możemy eksportować.
Koncert wyloguj się za pomocą łańcucha wylogowania.
A teraz stoisz tam.
I w tym kreatorze akcji, który jest normalnym kreatorem akcji, w którym nie muszę wysyłać
żadnych żądań HTP ani nic podobnego, właśnie wysłałem jego akcję wylogowania Yende, w której tworzę ten obiekt akcji
wylogowania.
Teraz możemy użyć taty.
I chcę móc się wylogować za pomocą strony, narysować stronę, narysować.
Chcę mieć ten przycisk wylogowania.
Oznacza to, że musimy zrobić coś, czego wcześniej nie robiliśmy.
Musimy dodać nowy przycisk, aby zdecydować o losowaniu.
Do tej pory dodajemy tylko automatycznie utworzone przyciski.
Ale dodawanie własnych treści nie jest zbyt trudne dla taty.
Przejdźmy do pliku Shop Navigator, w którym ustawiliśmy szufladę.
Oto jest.
A potem tutaj, oprócz moich opcji treści.
Możesz również dodać składnik treści tutaj.
Pozwala to dodawać własne treści do decyzji lub zamiast treści domyślnych.
Teraz bierze to funkcję, która odbiera rekwizyty, ponieważ w końcu jest to składnik reagujący, który
tutaj dodajesz.
Dostaje rekwizyty i zeznania podatkowe, jestem J. S. X i każdy musi upewnić się, że importujesz
reaguje od reakcji.
I wszyscy będziemy potrzebować kilku innych importów.
Musimy również zaimportować coś z native speakera.
I to powinien być widok bezpiecznego obszaru.
Chcę też zaimportować przycisk z natywnego REAC.
Ponadto z REACT Navigation musimy zaimportować elementy szuflady.
I znowu bardzo rodzimy.
Muszę też zobaczyć.
Po zaimportowaniu przejdźmy do naszego nowo dodanego komponentu treści.
I tutaj możemy teraz zwrócić widok w stylu flex.
Możesz oczywiście również dodać arkusz stylów.
Dodam tylko styl inline.
Nawiasem mówiąc, ten komponent może oczywiście również znajdować się w osobnym pliku.
Tej jesieni nie trzeba go tworzyć w locie.
Teraz w tym widoku chcę mieć widok bezpiecznego obszaru i upewnij się, że zawsze dodajesz wstawkę
siły równą górze.
Poziomy.
Nigdy, a to tylko kontroluje, jak to jest ułożone.
I w tym bezpiecznym widoku.
Powinieneś teraz dodać do rysowania elementy, ważne przekazywanie do nich rekwizytów, ponieważ są to domyślne renderowane
elementy szuflady.
I tak powinno być nadal.
Aby je poprawnie skonfigurować, musisz przekazać rekwizyty, które w końcu minęły i reagować nawigacją i
utrzymywać cały kontakt z losowaniem i tak dalej.
A teraz możesz tutaj dodać własny przedmiot do losowania.
I będzie ten przycisk, domyślnie natywny przycisk reagowania, w którym mówię wylogowanie.
Tam, gdzie chcę dodać kolor, powiedzmy, kolory, kropkę podstawową i zużycie na prasie.
Chcę teraz wysłać tę akcję wylogowania.
A teraz będziemy mieli ogromny problem.
Jak nas stąd wysłać?
Przede wszystkim, jeśli to uratujesz, powinieneś to zobaczyć.
Więc tutaj, jeśli rozwiniesz losowanie, oto przycisk wylogowania.
Dobrze.
Więc to działa.
I oczywiście możesz stylizować i pozycjonować tak, jak chcesz.
A tak przy okazji, wystarczy dwukrotnie sprawdzić.
Możemy to również zobaczyć na Androidzie, jeśli się tam zalogujemy.
Tutaj w szufladzie wszyscy robimy to po wylogowaniu.
Przycisk.
Nawiasem mówiąc, możemy chcieć dodać nieco więcej wypełnienia u góry.
Ale jak możemy wysłać wszystko?
Dodam tutaj dodatkowe wypełnienie.
Z 20
Ponieważ mój widok bezpiecznego obszaru działa, ale nie pozostawia więcej odstępu niż potrzebuję.
Tak więc, aby uzyskać dodatkowe odstępy, trochę wyściółki nie zaszkodzi.
Myślę, że tak jest lepiej.
Ale znowu, w jaki sposób możemy teraz upewnić się, że możemy wysłać akcję tutaj?
To jest składnik reagujący, prawda?
W końcu możemy po prostu użyć tutaj wysyłki.
Więc możemy importować.
Skorzystaj z wysyłki tutaj.
Od React redux.
Więc to, co zrobiliśmy wcześniej i wykorzystaliśmy tutaj, ponieważ możesz użyć tego haka na dowolnym elemencie, a to
tylko element.
Więc każdy rok przed naszym powrotem to X.
Mogę uzyskać dostęp do mojej funkcji wysyłania za pomocą funkcji wysyłania i na razie tutaj, po
naciśnięciu tego przycisku, możemy wywołać wysyłkę i wysłać akcję wyłączenia dla taty.
Oczywiście musisz tylko upewnić się, że go importujesz.
Więc zaimportuj wszystko z akcji z folderu sklepu, folder akcji zrób cały plik, a teraz użyj wszystkich akcji,
aby utworzyć tutaj martwą akcję.
Wszystkie działania zapisane.
Wyloguj.
Wyloguj się w ten sposób.
I to powinno wysłać do wylogowania.
Poza tym chcę również nawigować dalej, abyśmy mogli nawigować po kropkach za pomocą nawigacji rekwizytów.
To będzie dostępne tutaj i wróć tutaj do ekranu wyłączonego.
Więc w zasadzie to tutaj poza ekranem i nawigator przełączników.
Nasze losowanie jest częścią Nawigatora sklepu.
Stąd też możemy przejść do ekranu off.
Teraz, gdy wysyłamy wylogowanie, chcę się upewnić, że w reduktorze też coś robimy.
Mamy tutaj naszego twórcę akcji wylogowania.
Więc w reduktorze i zaoferowałeś użytkownikowi chciałeś nową skrzynkę do wylogowania.
A dla taty upewnij się, że importujesz identyfikator wylogowania.
I oczywiście tutaj jest to bardzo proste.
Zwracam swój stan początkowy, co na końcu oznacza, że token został zresetowany, a użytkownik I. RE. jest resetowany.
A teraz spróbujmy.
Jeśli wrócę tutaj i kliknę wyloguj się, wrócę do ekranu wyłączonego, więc to działa.
Spróbujmy także na Androidzie.
Kliknij Wyloguj się tutaj, wróciliśmy.
To działa.
Jesteśmy prawie z tym.
Ale powinniśmy również zostać automatycznie zablokowani, jeśli token wygasł, ponieważ ma datę ważności.
W tej chwili nie mamy automatycznego wygaśnięcia.