To nasza aplikacja tutaj.
Teraz w tej aplikacji dodaliśmy wiele funkcji, ale jest jeszcze jedna rzecz, którą
chcę dodać i którą należy odświeżyć.
Powiedzmy, że poszedłem móc pobrać wszystkie produkty z tej strony, więc
bez opuszczania go i wracania, które będą pobierać najnowsze produkty,
ale z tej strony, po prostu używając tego przyciągania, aby odświeżyć wzór w miejscu,
w którym przeciągasz, a następnie przeładowuje. Na szczęście jest to naprawdę łatwe w React Native,
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,
możesz ją wdrożyć, po prostu dodając rekwizyty do płaskiej listy. Pierwszy rekwizyt jest po odświeżeniu, musisz dodać, a
to powinno wskazywać
na funkcję, która jest wykonywana, gdy użytkownik pociągnie w dół, więc kiedy użytkownik uruchomi tę
reklamę akcji odświeżania tutaj na ekranie przeglądu
produktów, możemy oczywiście po prostu wskaż na ładowanie produktów, ponieważ jest to w
końcu funkcja, która ładuje nasz
produkt, więc jest to idealne.
Tutaj możemy po prostu wskazać ładowane produkty. Teraz, dodając to, automatycznie uzyskujemy tę funkcjonalność, ale tutaj pojawia
się również błąd, że rekwizyt odświeżający musi być ustawiony, ponieważ jest to inna rzecz,
którą zawsze musisz ustawić, gdy dodajesz podczas odświeżania. Ustawienie odświeżania automatycznie odblokowuje wszystkie te zachowania,
a także
ten fajny spinner, który domyślnie dostajesz, React Native zrobi to wszystko za Ciebie,
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ś,
i dlatego powinien wskazywać zmienną, na zmienną stanową, a więc na pewien stan, który wskazuje, czy aktualnie
ładujesz, czy nie, i
oczywiście to świetnie, ponieważ mamy nasza propozycja isLoading tutaj, więc to
mówi nam, czy ładujemy, czy nie. Będziemy mieli tylko jeden
problem, jeśli ładujemy, zastępuję całą zawartość ekranu i to oczywiście
nie jest to, co chcę zrobić, aby ponownie załadować. Naprawimy to, a prostym rozwiązaniem może być to, że usuwamy zestaw isLoading
tutaj z ładowanych produktów, ustawiając go zarówno na true, jak i false, i zamiast tego robimy to tylko dla
początkowego obciążenia tutaj w użyciu, gdy uruchamiamy produkty ładowania kiedy składnik się ładuje, a następnie tutaj, używając
tej składni, ustaw to na false, gdy skończymy. Możemy to zrobić, ponieważ ładowane produkty zwrócą obietnicę,
ponieważ ma to słowo kluczowe asynchroniczne, dlatego zwraca obietnicę, a dzięki temu otrzymujemy spinner ładujący, gdy początkowo się
ładuje, ale nie, gdy ładuje się ponownie, a to
oznacza również, że gdy odwiedzimy to strona, nie widzimy tarczy, ale to może być w porządku.
W każdym razie mamy tam trochę treści,
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
ustawić inny stan tutaj, nazwijmy to być może
Odświeżanie i ustawianie to Odświeżanie. Tutaj chcę zarządzać stanem,
który początkowo jest fałszywy, podobnie jak isLoading
i
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,
ustaw go na false, gdy skończysz. Oczywiście działa to w ten sam sposób co isLoading, ale teraz nie
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
tym odświeżającym rekwidzie, a zatem przy pierwszym ładowaniu, to działa jak poprzednio, ale teraz tutaj, otrzymujemy tę przyjemną
funkcję Pull to Refresh, którą możesz zobaczyć tutaj. Mogę ściągnąć, zdobyć ten spinner, a to automatycznie się załaduje ponownie
i mogę to udowodnić, edytując to na tym serwerze. Jeśli dodam tam dodatkową warstwę
lub kilka dodatkowych wykrzykników, możemy uzyskać te wykrzykniki tutaj, pociągając i odświeżając, tutaj widzisz to
i to samo oczywiście na Androidzie. Tam też masz tę funkcjonalność od razu
po wyjęciu z pudełka. W ten sposób możesz łatwo dodać funkcję Pull to Refresh do swojej aplikacji React Native.