1
00:00:02,180 --> 00:00:03,960
Quindi questa è la nostra app qui.

2
00:00:04,190 --> 00:00:08,750
Ora in questa applicazione, abbiamo aggiunto molte funzionalità, ma c'è un'altra cosa che voglio aggiungere

3
00:00:08,750 --> 00:00:10,910
e che è tirare per aggiornare.

4
00:00:10,910 --> 00:00:14,640
Diciamo che sono stato in grado di recuperare tutti i prodotti all'interno di

5
00:00:14,720 --> 00:00:18,380
questa pagina, quindi senza lasciarlo e tornare indietro che recupererà gli ultimi

6
00:00:18,470 --> 00:00:23,450
prodotti ma dall'interno di questa pagina semplicemente usando questo pull per aggiornare il modello in cui trascini

7
00:00:23,450 --> 00:00:27,910
verso il basso e poi ricariche. Per fortuna è davvero facile da fare in React Native se

8
00:00:27,920 --> 00:00:33,960
stai usando un elenco piatto o una vista di scorrimento perché è incorporato in questi componenti. Qui nella schermata di panoramica dei prodotti su un

9
00:00:34,000 --> 00:00:40,430
elenco piatto, è possibile implementarlo semplicemente aggiungendo ai puntelli all'elenco piatto. Il primo prop è in aggiornamento, è necessario

10
00:00:40,430 --> 00:00:42,500
aggiungere e questo dovrebbe

11
00:00:42,500 --> 00:00:48,860
puntare a una funzione che viene eseguita quando l'utente si abbassa, quindi quando l'utente avvia questo

12
00:00:48,860 --> 00:00:51,900
pull per aggiornare l'annuncio qui nella schermata di

13
00:00:52,060 --> 00:00:57,290
panoramica dei prodotti, possiamo ovviamente semplicemente punta a caricare i prodotti perché questa

14
00:00:57,320 --> 00:00:59,510
è la funzione che carica il

15
00:00:59,510 --> 00:01:01,610
nostro prodotto, quindi è perfetta.

16
00:01:01,610 --> 00:01:09,620
Quindi qui possiamo semplicemente puntare al caricamento dei prodotti. Ora aggiungendo questo, otteniamo automaticamente questa funzionalità ma qui andiamo anche

17
00:01:09,770 --> 00:01:15,260
a ricevere un errore, che il puntello rinfrescante deve essere impostato perché è l'altra cosa

18
00:01:15,260 --> 00:01:21,980
che devi sempre impostare quando aggiungi su refresh. L'impostazione su refresh sblocca automaticamente tutto questo comportamento

19
00:01:22,010 --> 00:01:23,090
e anche

20
00:01:23,090 --> 00:01:28,850
questo simpatico spinner che ottieni di default, React Native farà tutto questo per te,

21
00:01:28,850 --> 00:01:36,700
ma lo fa solo se aggiungi anche il puntello rinfrescante. L'elica rinfrescante è necessaria per far sapere a React Native quando

22
00:01:36,700 --> 00:01:43,270
hai finito e questo dovrebbe quindi puntare a variabile, a una variabile stateful, quindi a qualche stato che indica

23
00:01:43,270 --> 00:01:45,280
se stai caricando o meno

24
00:01:45,340 --> 00:01:49,530
e ovviamente è fantastico perché abbiamo il nostro supporto isLoading qui, quindi

25
00:01:49,840 --> 00:01:54,720
ci dice se stiamo caricando o meno. Avremo solo un problema,

26
00:01:55,030 --> 00:01:59,680
se stiamo caricando, sostituisco l'intero contenuto dello schermo e

27
00:01:59,680 --> 00:02:08,260
ovviamente non è quello che voglio fare per ricaricare. Quindi risolveremo questo problema e una semplice soluzione potrebbe essere quella di rimuovere il set

28
00:02:08,260 --> 00:02:14,800
isCaricare la parte qui dai prodotti di caricamento, sia impostandola su true che su false e invece farlo solo per il caricamento iniziale

29
00:02:14,800 --> 00:02:20,530
qui in uso effetto in cui attiviamo il caricamento dei prodotti quando il componente viene caricato e quindi qui, usando

30
00:02:20,590 --> 00:02:26,530
questo quindi sintassi, impostalo su false una volta terminato. Possiamo farlo perché caricare prodotti restituirà una promessa

31
00:02:26,530 --> 00:02:32,720
perché ha questa parola chiave asincrona, quindi restituisce una promessa e con ciò otteniamo lo spinner di caricamento quando

32
00:02:32,720 --> 00:02:36,050
questo viene caricato inizialmente ma non quando si ricarica e

33
00:02:36,050 --> 00:02:41,330
ciò significa anche che quando visitiamo questo pagina, non vediamo lo spinner ma potrebbe andare bene.

34
00:02:41,340 --> 00:02:43,250
Abbiamo comunque dei contenuti lì e

35
00:02:43,290 --> 00:02:50,190
se poi si aggiorna dopo aver visitato questa pagina, potrebbe andare bene. Quindi ora non stiamo impostando il caricamento qui, ma

36
00:02:50,190 --> 00:02:53,480
ora possiamo impostare uno stato diverso qui, chiamiamolo

37
00:02:53,550 --> 00:02:59,030
isRefreshing forse e impostiamo isRefreshing. Qui voglio gestire uno

38
00:02:59,100 --> 00:03:04,200
stato che inizialmente è falso, proprio come isLoading e

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

40
00:03:05,220 --> 00:03:17,370
è quello che voglio impostare qui, quindi set è rinfrescante su vero qui e anche qui dopo aver provato a

41
00:03:17,380 --> 00:03:25,950
catturarlo, impostalo su falso una volta terminato. Quindi, ovviamente, funziona allo stesso modo di isLoading ma ora non

42
00:03:26,100 --> 00:03:32,760
userò isRefreshing per sostituire l'intero contenuto dello schermo ma invece isRefreshing ora può essere reimmesso nella lista piatta

43
00:03:32,760 --> 00:03:39,360
su questo puntello rinfrescante e quindi sul carico iniziale, funziona come prima ma ora qui, abbiamo questa

44
00:03:39,360 --> 00:03:45,720
bella funzionalità Pull to Refresh, la vedi qui. Posso tirare giù, ottenere quel filatore e questo si ricaricherà

45
00:03:45,780 --> 00:03:51,000
automaticamente e posso dimostrarlo modificandolo su questo server. Se aggiungo un ulteriore livello o

46
00:03:51,000 --> 00:03:57,890
un paio di punti esclamativi extra lì, possiamo ottenere quei punti esclamativi qui tirando e aggiornando, qui lo

47
00:03:58,160 --> 00:04:03,530
vedi e lo stesso ovviamente su Android. Lì hai anche quella funzionalità pronta

48
00:04:03,530 --> 00:04:10,280
all'uso ed è così che puoi aggiungere la funzionalità Pull to Refresh alla tua applicazione React Native.