Quindi questa è la nostra app qui.
Ora in questa applicazione, abbiamo aggiunto molte funzionalità, ma c'è un'altra cosa che voglio aggiungere
e che è tirare per aggiornare.
Diciamo che sono stato in grado di recuperare tutti i prodotti all'interno di
questa pagina, quindi senza lasciarlo e tornare indietro che recupererà gli ultimi
prodotti ma dall'interno di questa pagina semplicemente usando questo pull per aggiornare il modello in cui trascini
verso il basso e poi ricariche. Per fortuna è davvero facile da fare in React Native se
stai usando un elenco piatto o una vista di scorrimento perché è incorporato in questi componenti. Qui nella schermata di panoramica dei prodotti su un
elenco piatto, è possibile implementarlo semplicemente aggiungendo ai puntelli all'elenco piatto. Il primo prop è in aggiornamento, è necessario
aggiungere e questo dovrebbe
puntare a una funzione che viene eseguita quando l'utente si abbassa, quindi quando l'utente avvia questo
pull per aggiornare l'annuncio qui nella schermata di
panoramica dei prodotti, possiamo ovviamente semplicemente punta a caricare i prodotti perché questa
è la funzione che carica il
nostro prodotto, quindi è perfetta.
Quindi qui possiamo semplicemente puntare al caricamento dei prodotti. Ora aggiungendo questo, otteniamo automaticamente questa funzionalità ma qui andiamo anche
a ricevere un errore, che il puntello rinfrescante deve essere impostato perché è l'altra cosa
che devi sempre impostare quando aggiungi su refresh. L'impostazione su refresh sblocca automaticamente tutto questo comportamento
e anche
questo simpatico spinner che ottieni di default, React Native farà tutto questo per te,
ma lo fa solo se aggiungi anche il puntello rinfrescante. L'elica rinfrescante è necessaria per far sapere a React Native quando
hai finito e questo dovrebbe quindi puntare a variabile, a una variabile stateful, quindi a qualche stato che indica
se stai caricando o meno
e ovviamente è fantastico perché abbiamo il nostro supporto isLoading qui, quindi
ci dice se stiamo caricando o meno. Avremo solo un problema,
se stiamo caricando, sostituisco l'intero contenuto dello schermo e
ovviamente non è quello che voglio fare per ricaricare. Quindi risolveremo questo problema e una semplice soluzione potrebbe essere quella di rimuovere il set
isCaricare la parte qui dai prodotti di caricamento, sia impostandola su true che su false e invece farlo solo per il caricamento iniziale
qui in uso effetto in cui attiviamo il caricamento dei prodotti quando il componente viene caricato e quindi qui, usando
questo quindi sintassi, impostalo su false una volta terminato. Possiamo farlo perché caricare prodotti restituirà una promessa
perché ha questa parola chiave asincrona, quindi restituisce una promessa e con ciò otteniamo lo spinner di caricamento quando
questo viene caricato inizialmente ma non quando si ricarica e
ciò significa anche che quando visitiamo questo pagina, non vediamo lo spinner ma potrebbe andare bene.
Abbiamo comunque dei contenuti lì e
se poi si aggiorna dopo aver visitato questa pagina, potrebbe andare bene. Quindi ora non stiamo impostando il caricamento qui, ma
ora possiamo impostare uno stato diverso qui, chiamiamolo
isRefreshing forse e impostiamo isRefreshing. Qui voglio gestire uno
stato che inizialmente è falso, proprio come isLoading e
ora
è quello che voglio impostare qui, quindi set è rinfrescante su vero qui e anche qui dopo aver provato a
catturarlo, impostalo su falso una volta terminato. Quindi, ovviamente, funziona allo stesso modo di isLoading ma ora non
userò isRefreshing per sostituire l'intero contenuto dello schermo ma invece isRefreshing ora può essere reimmesso nella lista piatta
su questo puntello rinfrescante e quindi sul carico iniziale, funziona come prima ma ora qui, abbiamo questa
bella funzionalità Pull to Refresh, la vedi qui. Posso tirare giù, ottenere quel filatore e questo si ricaricherà
automaticamente e posso dimostrarlo modificandolo su questo server. Se aggiungo un ulteriore livello o
un paio di punti esclamativi extra lì, possiamo ottenere quei punti esclamativi qui tirando e aggiornando, qui lo
vedi e lo stesso ovviamente su Android. Lì hai anche quella funzionalità pronta
all'uso ed è così che puoi aggiungere la funzionalità Pull to Refresh alla tua applicazione React Native.