1
00:00:02,180 --> 00:00:03,960
To nasza aplikacja tutaj.

2
00:00:04,190 --> 00:00:08,750
Teraz w tej aplikacji dodaliśmy wiele funkcji, ale jest jeszcze jedna rzecz, którą

3
00:00:08,750 --> 00:00:10,910
chcę dodać i którą należy odświeżyć.

4
00:00:10,910 --> 00:00:14,640
Powiedzmy, że poszedłem móc pobrać wszystkie produkty z tej strony, więc

5
00:00:14,720 --> 00:00:18,380
bez opuszczania go i wracania, które będą pobierać najnowsze produkty,

6
00:00:18,470 --> 00:00:23,450
ale z tej strony, po prostu używając tego przyciągania, aby odświeżyć wzór w miejscu,

7
00:00:23,450 --> 00:00:27,910
w którym przeciągasz, a następnie przeładowuje. Na szczęście jest to naprawdę łatwe w React Native,

8
00:00:27,920 --> 00:00:33,960
jeśli używasz płaskiej listy lub widoku przewijania, ponieważ jest on wbudowany w te komponenty. Tutaj, na ekranie przeglądu produktów na płaskiej liście,

9
00:00:34,000 --> 00:00:40,430
możesz ją wdrożyć, po prostu dodając rekwizyty do płaskiej listy. Pierwszy rekwizyt jest po odświeżeniu, musisz dodać, a

10
00:00:40,430 --> 00:00:42,500
to powinno wskazywać

11
00:00:42,500 --> 00:00:48,860
na funkcję, która jest wykonywana, gdy użytkownik pociągnie w dół, więc kiedy użytkownik uruchomi tę

12
00:00:48,860 --> 00:00:51,900
reklamę akcji odświeżania tutaj na ekranie przeglądu

13
00:00:52,060 --> 00:00:57,290
produktów, możemy oczywiście po prostu wskaż na ładowanie produktów, ponieważ jest to w

14
00:00:57,320 --> 00:00:59,510
końcu funkcja, która ładuje nasz

15
00:00:59,510 --> 00:01:01,610
produkt, więc jest to idealne.

16
00:01:01,610 --> 00:01:09,620
Tutaj możemy po prostu wskazać ładowane produkty. Teraz, dodając to, automatycznie uzyskujemy tę funkcjonalność, ale tutaj pojawia

17
00:01:09,770 --> 00:01:15,260
się również błąd, że rekwizyt odświeżający musi być ustawiony, ponieważ jest to inna rzecz,

18
00:01:15,260 --> 00:01:21,980
którą zawsze musisz ustawić, gdy dodajesz podczas odświeżania. Ustawienie odświeżania automatycznie odblokowuje wszystkie te zachowania,

19
00:01:22,010 --> 00:01:23,090
a także

20
00:01:23,090 --> 00:01:28,850
ten fajny spinner, który domyślnie dostajesz, React Native zrobi to wszystko za Ciebie,

21
00:01:28,850 --> 00:01:36,700
ale robi to tylko wtedy, gdy dodasz odświeżającą prop. Odświeżający rekwizyt jest wymagany, aby poinformować React Native, kiedy skończyłeś,

22
00:01:36,700 --> 00:01:43,270
i dlatego powinien wskazywać zmienną, na zmienną stanową, a więc na pewien stan, który wskazuje, czy aktualnie

23
00:01:43,270 --> 00:01:45,280
ładujesz, czy nie, i

24
00:01:45,340 --> 00:01:49,530
oczywiście to świetnie, ponieważ mamy nasza propozycja isLoading tutaj, więc to

25
00:01:49,840 --> 00:01:54,720
mówi nam, czy ładujemy, czy nie. Będziemy mieli tylko jeden

26
00:01:55,030 --> 00:01:59,680
problem, jeśli ładujemy, zastępuję całą zawartość ekranu i to oczywiście

27
00:01:59,680 --> 00:02:08,260
nie jest to, co chcę zrobić, aby ponownie załadować. Naprawimy to, a prostym rozwiązaniem może być to, że usuwamy zestaw isLoading

28
00:02:08,260 --> 00:02:14,800
tutaj z ładowanych produktów, ustawiając go zarówno na true, jak i false, i zamiast tego robimy to tylko dla

29
00:02:14,800 --> 00:02:20,530
początkowego obciążenia tutaj w użyciu, gdy uruchamiamy produkty ładowania kiedy składnik się ładuje, a następnie tutaj, używając

30
00:02:20,590 --> 00:02:26,530
tej składni, ustaw to na false, gdy skończymy. Możemy to zrobić, ponieważ ładowane produkty zwrócą obietnicę,

31
00:02:26,530 --> 00:02:32,720
ponieważ ma to słowo kluczowe asynchroniczne, dlatego zwraca obietnicę, a dzięki temu otrzymujemy spinner ładujący, gdy początkowo się

32
00:02:32,720 --> 00:02:36,050
ładuje, ale nie, gdy ładuje się ponownie, a to

33
00:02:36,050 --> 00:02:41,330
oznacza również, że gdy odwiedzimy to strona, nie widzimy tarczy, ale to może być w porządku.

34
00:02:41,340 --> 00:02:43,250
W każdym razie mamy tam trochę treści,

35
00:02:43,290 --> 00:02:50,190
a jeśli to się zaktualizuje po odwiedzeniu tej strony, może to być w porządku. Więc teraz nie ustawiamy ładowania tutaj, ale możemy teraz

36
00:02:50,190 --> 00:02:53,480
ustawić inny stan tutaj, nazwijmy to być może

37
00:02:53,550 --> 00:02:59,030
Odświeżanie i ustawianie to Odświeżanie. Tutaj chcę zarządzać stanem,

38
00:02:59,100 --> 00:03:04,200
który początkowo jest fałszywy, podobnie jak isLoading

39
00:03:04,200 --> 00:03:05,210
i

40
00:03:05,220 --> 00:03:17,370
właśnie to chcę tutaj ustawić, więc zestaw odświeża się do prawdy tutaj, a także tutaj po próbie złapania,

41
00:03:17,380 --> 00:03:25,950
ustaw go na false, gdy skończysz. Oczywiście działa to w ten sam sposób co isLoading, ale teraz nie

42
00:03:26,100 --> 00:03:32,760
użyję isRefreshing do zastąpienia całej zawartości ekranu, ale zamiast tego isRefreshing można teraz przywrócić do płaskiej listy na

43
00:03:32,760 --> 00:03:39,360
tym odświeżającym rekwidzie, a zatem przy pierwszym ładowaniu, to działa jak poprzednio, ale teraz tutaj, otrzymujemy tę przyjemną

44
00:03:39,360 --> 00:03:45,720
funkcję Pull to Refresh, którą możesz zobaczyć tutaj. Mogę ściągnąć, zdobyć ten spinner, a to automatycznie się załaduje ponownie

45
00:03:45,780 --> 00:03:51,000
i mogę to udowodnić, edytując to na tym serwerze. Jeśli dodam tam dodatkową warstwę

46
00:03:51,000 --> 00:03:57,890
lub kilka dodatkowych wykrzykników, możemy uzyskać te wykrzykniki tutaj, pociągając i odświeżając, tutaj widzisz to

47
00:03:58,160 --> 00:04:03,530
i to samo oczywiście na Androidzie. Tam też masz tę funkcjonalność od razu

48
00:04:03,530 --> 00:04:10,280
po wyjęciu z pudełka. W ten sposób możesz łatwo dodać funkcję Pull to Refresh do swojej aplikacji React Native.