1 00:00:02,180 --> 00:00:03,960 Das ist also unsere App hier. 2 00:00:04,190 --> 00:00:08,750 Jetzt haben wir in dieser Anwendung viele Funktionen hinzugefügt, aber ich möchte noch eine weitere 3 00:00:08,750 --> 00:00:10,910 Sache hinzufügen, die zum Aktualisieren verwendet wird. 4 00:00:10,910 --> 00:00:14,640 Nehmen wir an, ich konnte alle Produkte von dieser Seite aus abrufen, 5 00:00:14,720 --> 00:00:18,380 ohne sie zu verlassen und zurückzukehren, um die neuesten Produkte von dieser 6 00:00:18,470 --> 00:00:23,450 Seite abzurufen, indem ich einfach diesen Pull verwende, um das Muster zu aktualisieren, wo Sie es nach 7 00:00:23,450 --> 00:00:27,910 unten ziehen und dann lädt nach. Zum Glück ist dies in React Native sehr einfach, wenn 8 00:00:27,920 --> 00:00:33,960 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 9 00:00:34,000 --> 00:00:40,430 es implementieren, indem Sie einfach Requisiten zur flachen Liste hinzufügen. Die erste Requisite befindet sich in der Aktualisierung, die 10 00:00:40,430 --> 00:00:42,500 Sie hinzufügen müssen, und 11 00:00:42,500 --> 00:00:48,860 dies sollte auf eine Funktion verweisen, die ausgeführt wird, wenn der Benutzer herunterzieht. Wenn der Benutzer diese 12 00:00:48,860 --> 00:00:51,900 Anzeige zum Aktualisieren der Aktion hier im Produktübersichtsbildschirm 13 00:00:52,060 --> 00:00:57,290 startet, können wir dies natürlich einfach tun Zeigen Sie auf Ladeprodukte, da dies letztendlich 14 00:00:57,320 --> 00:00:59,510 die Funktion ist, die unser Produkt 15 00:00:59,510 --> 00:01:01,610 lädt. Dies ist also perfekt. 16 00:01:01,610 --> 00:01:09,620 Hier können wir also nur auf Ladeprodukte zeigen. Wenn Sie dies hinzufügen, erhalten wir automatisch diese Funktionalität, aber hier erhalten 17 00:01:09,770 --> 00:01:15,260 wir auch den Fehler, dass die Aktualisierungs-Requisite eingestellt werden muss, da dies die andere Sache ist, die 18 00:01:15,260 --> 00:01:21,980 Sie immer einstellen müssen, wenn Sie die Aktualisierung hinzufügen. Wenn Sie die Option "Aktualisieren" aktivieren, wird dieses Verhalten 19 00:01:22,010 --> 00:01:23,090 und auch 20 00:01:23,090 --> 00:01:28,850 dieser nette Spinner, den Sie standardmäßig erhalten, automatisch freigeschaltet. React Native erledigt das alles für 21 00:01:28,850 --> 00:01:36,700 Sie, dies jedoch nur, wenn Sie auch die Aktualisierungs-Requisite hinzufügen. Die erfrischende Requisite ist erforderlich, um React Native zu informieren, wenn 22 00:01:36,700 --> 00:01:43,270 Sie fertig sind. Dies sollte daher auf eine Variable verweisen, auf eine statusbehaftete Variable, also auf einen Status, der angibt, 23 00:01:43,270 --> 00:01:45,280 ob Sie gerade laden oder 24 00:01:45,340 --> 00:01:49,530 nicht, und das ist natürlich großartig, weil wir es haben Unsere isLoading-Requisite hier 25 00:01:49,840 --> 00:01:54,720 zeigt uns, ob wir laden oder nicht. Wir haben nur ein Problem: 26 00:01:55,030 --> 00:01:59,680 Wenn wir laden, ersetze ich den gesamten Inhalt des Bildschirms 27 00:01:59,680 --> 00:02:08,260 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 28 00:02:08,260 --> 00:02:14,800 den Teil isLoading set hier aus Ladeprodukten entfernen, ihn sowohl auf true als auch auf false setzen und dies stattdessen nur 29 00:02:14,800 --> 00:02:20,530 für den anfänglichen Ladevorgang tun, bei dem wir Ladeprodukte auslösen Wenn die Komponente geladen wird, setzen Sie diese Syntax 30 00:02:20,590 --> 00:02:26,530 mit dieser Syntax auf false, sobald wir fertig sind. Wir können dies tun, weil Ladeprodukte ein Versprechen 31 00:02:26,530 --> 00:02:32,720 zurückgeben, weil sie dieses asynchrone Schlüsselwort haben, daher ein Versprechen zurückgeben und damit den Ladespinner erhalten, wenn dieser anfänglich geladen 32 00:02:32,720 --> 00:02:36,050 wird, aber nicht, wenn er neu geladen wird, und das bedeutet 33 00:02:36,050 --> 00:02:41,330 auch, dass wir dies besuchen Seite, wir sehen den Spinner nicht, aber das könnte in Ordnung sein. 34 00:02:41,340 --> 00:02:43,250 Wir haben dort sowieso einige Inhalte und 35 00:02:43,290 --> 00:02:50,190 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 36 00:02:50,190 --> 00:02:53,480 wir können hier jetzt einen anderen Status festlegen. Nennen wir 37 00:02:53,550 --> 00:02:59,030 es vielleicht "Aktualisieren" und setzen Sie "Aktualisieren". Hier möchte ich einen Status 38 00:02:59,100 --> 00:03:04,200 verwalten, der anfangs falsch ist, genau wie isLoading, und 39 00:03:04,200 --> 00:03:05,210 das 40 00:03:05,220 --> 00:03:17,370 möchte ich jetzt hier festlegen. Daher wird set hier und auch hier nach dem Versuch catch auf fresh aktualisiert. Setzen Sie 41 00:03:17,380 --> 00:03:25,950 ihn auf false, wenn Sie fertig sind. Dies funktioniert natürlich genauso wie isLoading, aber jetzt werde ich nicht isRefreshing 42 00:03:26,100 --> 00:03:32,760 verwenden, um den gesamten Inhalt des Bildschirms zu ersetzen, sondern isRefreshing kann jetzt auf dieser aktualisierenden Requisite und 43 00:03:32,760 --> 00:03:39,360 daher beim ersten Laden in die flache Liste zurückgeführt werden. Dies funktioniert wie zuvor, aber jetzt hier erhalten 44 00:03:39,360 --> 00:03:45,720 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 45 00:03:45,780 --> 00:03:51,000 kann dies beweisen, indem ich ihn auf diesem Server bearbeite. Wenn ich dort eine zusätzliche Ebene 46 00:03:51,000 --> 00:03:57,890 oder ein paar zusätzliche Ausrufezeichen hinzufüge, können wir diese Ausrufezeichen hier durch Ziehen und Aktualisieren erhalten. Hier sehen 47 00:03:58,160 --> 00:04:03,530 Sie das und natürlich auch auf Android. Dort haben Sie diese Funktionalität 48 00:04:03,530 --> 00:04:10,280 auch sofort verfügbar. So einfach können Sie Ihrer React Native-Anwendung die Pull-to-Refresh-Funktionalität hinzufügen.