Das ist also unsere App hier.
Jetzt haben wir in dieser Anwendung viele Funktionen hinzugefügt, aber ich möchte noch eine weitere
Sache hinzufügen, die zum Aktualisieren verwendet wird.
Nehmen wir an, ich konnte alle Produkte von dieser Seite aus abrufen,
ohne sie zu verlassen und zurückzukehren, um die neuesten Produkte von dieser
Seite abzurufen, indem ich einfach diesen Pull verwende, um das Muster zu aktualisieren, wo Sie es nach
unten ziehen und dann lädt nach. Zum Glück ist dies in React Native sehr einfach, wenn
Sie eine flache Liste oder eine Bildlaufansicht verwenden, da diese in diese Komponenten integriert ist. Hier im Produktübersichtsbildschirm auf der flachen Liste können Sie
es implementieren, indem Sie einfach Requisiten zur flachen Liste hinzufügen. Die erste Requisite befindet sich in der Aktualisierung, die
Sie hinzufügen müssen, und
dies sollte auf eine Funktion verweisen, die ausgeführt wird, wenn der Benutzer herunterzieht. Wenn der Benutzer diese
Anzeige zum Aktualisieren der Aktion hier im Produktübersichtsbildschirm
startet, können wir dies natürlich einfach tun Zeigen Sie auf Ladeprodukte, da dies letztendlich
die Funktion ist, die unser Produkt
lädt. Dies ist also perfekt.
Hier können wir also nur auf Ladeprodukte zeigen. Wenn Sie dies hinzufügen, erhalten wir automatisch diese Funktionalität, aber hier erhalten
wir auch den Fehler, dass die Aktualisierungs-Requisite eingestellt werden muss, da dies die andere Sache ist, die
Sie immer einstellen müssen, wenn Sie die Aktualisierung hinzufügen. Wenn Sie die Option "Aktualisieren" aktivieren, wird dieses Verhalten
und auch
dieser nette Spinner, den Sie standardmäßig erhalten, automatisch freigeschaltet. React Native erledigt das alles für
Sie, dies jedoch nur, wenn Sie auch die Aktualisierungs-Requisite hinzufügen. Die erfrischende Requisite ist erforderlich, um React Native zu informieren, wenn
Sie fertig sind. Dies sollte daher auf eine Variable verweisen, auf eine statusbehaftete Variable, also auf einen Status, der angibt,
ob Sie gerade laden oder
nicht, und das ist natürlich großartig, weil wir es haben Unsere isLoading-Requisite hier
zeigt uns, ob wir laden oder nicht. Wir haben nur ein Problem:
Wenn wir laden, ersetze ich den gesamten Inhalt des Bildschirms
und das möchte ich natürlich nicht zum Neuladen tun. Wir werden dies beheben und eine einfache Lösung könnte darin bestehen, dass wir
den Teil isLoading set hier aus Ladeprodukten entfernen, ihn sowohl auf true als auch auf false setzen und dies stattdessen nur
für den anfänglichen Ladevorgang tun, bei dem wir Ladeprodukte auslösen Wenn die Komponente geladen wird, setzen Sie diese Syntax
mit dieser Syntax auf false, sobald wir fertig sind. Wir können dies tun, weil Ladeprodukte ein Versprechen
zurückgeben, weil sie dieses asynchrone Schlüsselwort haben, daher ein Versprechen zurückgeben und damit den Ladespinner erhalten, wenn dieser anfänglich geladen
wird, aber nicht, wenn er neu geladen wird, und das bedeutet
auch, dass wir dies besuchen Seite, wir sehen den Spinner nicht, aber das könnte in Ordnung sein.
Wir haben dort sowieso einige Inhalte und
wenn diese nach dem Besuch dieser Seite aktualisiert werden, ist das möglicherweise in Ordnung. Jetzt wird also nicht festgelegt, dass hier geladen wird, aber
wir können hier jetzt einen anderen Status festlegen. Nennen wir
es vielleicht "Aktualisieren" und setzen Sie "Aktualisieren". Hier möchte ich einen Status
verwalten, der anfangs falsch ist, genau wie isLoading, und
das
möchte ich jetzt hier festlegen. Daher wird set hier und auch hier nach dem Versuch catch auf fresh aktualisiert. Setzen Sie
ihn auf false, wenn Sie fertig sind. Dies funktioniert natürlich genauso wie isLoading, aber jetzt werde ich nicht isRefreshing
verwenden, um den gesamten Inhalt des Bildschirms zu ersetzen, sondern isRefreshing kann jetzt auf dieser aktualisierenden Requisite und
daher beim ersten Laden in die flache Liste zurückgeführt werden. Dies funktioniert wie zuvor, aber jetzt hier erhalten
wir diese nette Pull-to-Refresh-Funktion, die Sie hier sehen. Ich kann herunterziehen, diesen Spinner bekommen und dieser wird automatisch neu geladen und ich
kann dies beweisen, indem ich ihn auf diesem Server bearbeite. Wenn ich dort eine zusätzliche Ebene
oder ein paar zusätzliche Ausrufezeichen hinzufüge, können wir diese Ausrufezeichen hier durch Ziehen und Aktualisieren erhalten. Hier sehen
Sie das und natürlich auch auf Android. Dort haben Sie diese Funktionalität
auch sofort verfügbar. So einfach können Sie Ihrer React Native-Anwendung die Pull-to-Refresh-Funktionalität hinzufügen.