1
00:00:02,180 --> 00:00:03,960
Então esse é o nosso aplicativo aqui.

2
00:00:04,190 --> 00:00:08,750
Agora, neste aplicativo, adicionamos muitas funcionalidades, mas há mais uma coisa que quero adicionar

3
00:00:08,750 --> 00:00:10,910
e que é necessária a atualização.

4
00:00:10,910 --> 00:00:14,640
Digamos que eu fui capaz de buscar todos os produtos de dentro

5
00:00:14,720 --> 00:00:18,380
desta página, portanto, sem deixá-lo e voltar, o que buscará os produtos

6
00:00:18,470 --> 00:00:23,450
mais recentes, mas de dentro desta página, simplesmente usando esse pull para atualizar o padrão onde você

7
00:00:23,450 --> 00:00:27,910
arrasta para baixo e depois recarrega. Felizmente, isso é muito fácil de fazer no React Native, se

8
00:00:27,920 --> 00:00:33,960
você estiver usando uma lista simples ou uma exibição de rolagem, pois está integrada nesses componentes. Aqui na tela de visão geral dos produtos na

9
00:00:34,000 --> 00:00:40,430
lista simples, você pode implementá-lo simplesmente adicionando adereços à lista simples. O primeiro suporte é a atualização, você precisa adicionar e

10
00:00:40,430 --> 00:00:42,500
isso deve apontar para uma

11
00:00:42,500 --> 00:00:48,860
função que é executada quando o usuário puxa para baixo; portanto, quando o usuário inicia esse puxar para atualizar

12
00:00:48,860 --> 00:00:51,900
o anúncio de ação aqui na tela de visão

13
00:00:52,060 --> 00:00:57,290
geral de produtos, é claro que podemos simplesmente apontar para carregar produtos, porque essa é,

14
00:00:57,320 --> 00:00:59,510
no final, a função que carrega

15
00:00:59,510 --> 00:01:01,610
nosso produto, então isso é perfeito.

16
00:01:01,610 --> 00:01:09,620
Então aqui podemos apenas apontar para carregar produtos. Agora, adicionando isso, obtemos automaticamente essa funcionalidade, mas aqui também ocorre

17
00:01:09,770 --> 00:01:15,260
um erro, que o suporte de atualização deve ser definido porque essa é a outra coisa

18
00:01:15,260 --> 00:01:21,980
que você sempre deve definir ao adicionar a atualização. A configuração da atualização desbloqueia automaticamente todo esse comportamento e

19
00:01:22,010 --> 00:01:23,090
também o

20
00:01:23,090 --> 00:01:28,850
bom controle giratório que você obtém por padrão. O React Native fará tudo isso por você, mas

21
00:01:28,850 --> 00:01:36,700
só o fará se você também adicionar o suporte de atualização. A atualização é necessária para que o React Native saiba quando você

22
00:01:36,700 --> 00:01:43,270
terminar e, portanto, deve apontar para variável, para uma variável com estado, portanto, em algum estado que indica se você

23
00:01:43,270 --> 00:01:45,280
está carregando ou não no

24
00:01:45,340 --> 00:01:49,530
momento e, claro, isso é ótimo porque temos nosso suporte isLoading aqui, para

25
00:01:49,840 --> 00:01:54,720
que nos diga se estamos carregando ou não. Teremos apenas um problema: se

26
00:01:55,030 --> 00:01:59,680
estivermos carregando, substituo todo o conteúdo da tela e, é

27
00:01:59,680 --> 00:02:08,260
claro, não é isso que quero fazer para recarregar. Portanto, corrigiremos isso e uma solução simples seria remover a parte set isLoading

28
00:02:08,260 --> 00:02:14,800
aqui dos produtos de carregamento, configurando-a como true e false e, em vez disso, fazer isso apenas para o carregamento

29
00:02:14,800 --> 00:02:20,530
inicial aqui em uso, onde acionamos produtos de carregamento quando o componente carregar e, em seguida, aqui,

30
00:02:20,590 --> 00:02:26,530
usando esta sintaxe, defina-o como false quando terminarmos. Podemos fazer isso porque carregar produtos retornará uma

31
00:02:26,530 --> 00:02:32,720
promessa porque está tendo essa palavra-chave assíncrona, portanto, retorna uma promessa e, com isso, obtemos o controle giratório de carregamento

32
00:02:32,720 --> 00:02:36,050
quando isso carrega inicialmente, mas não quando recarrega e isso também

33
00:02:36,050 --> 00:02:41,330
significa que, quando visitarmos isso página, não vemos o botão giratório, mas isso pode ser bom.

34
00:02:41,340 --> 00:02:43,250
De qualquer forma, temos algum conteúdo

35
00:02:43,290 --> 00:02:50,190
lá e, se isso for atualizado depois de visitar esta página, tudo bem. Então agora não estamos definindo o carregamento aqui, mas

36
00:02:50,190 --> 00:02:53,480
agora podemos definir um estado diferente aqui, vamos chamá-lo

37
00:02:53,550 --> 00:02:59,030
de isRefreshing talvez e definir isRefreshing. Aqui, eu quero gerenciar um

38
00:02:59,100 --> 00:03:04,200
estado que inicialmente é falso, assim como isLoading, e

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

40
00:03:05,220 --> 00:03:17,370
é isso que eu quero definir aqui; portanto, o conjunto é atualizado como true aqui e também aqui após a tentativa

41
00:03:17,380 --> 00:03:25,950
de captura, defina-o como false quando terminar. Portanto, é claro, isso funciona da mesma maneira que isLoading, mas agora não

42
00:03:26,100 --> 00:03:32,760
usarei o isRefreshing para substituir todo o conteúdo da tela, mas o isRefreshing agora pode ser enviado de volta à

43
00:03:32,760 --> 00:03:39,360
lista simples neste suporte refrescante e, portanto, no carregamento inicial, isso funciona como antes, mas agora aqui, temos essa agradável

44
00:03:39,360 --> 00:03:45,720
funcionalidade Pull to Refresh, que você vê aqui. Eu posso puxar para baixo, pegar o botão giratório e isso será recarregado

45
00:03:45,780 --> 00:03:51,000
automaticamente e eu posso provar isso editando isso neste servidor. Se eu adicionar uma camada extra

46
00:03:51,000 --> 00:03:57,890
ou alguns pontos de exclamação extras lá, podemos obter esses pontos de exclamação aqui, puxando e atualizando, aqui você vê

47
00:03:58,160 --> 00:04:03,530
isso e o mesmo, é claro, no Android. Lá você também tem essa funcionalidade pronta

48
00:04:03,530 --> 00:04:10,280
para usar e é assim que você pode adicionar a funcionalidade Pull to Refresh ao seu aplicativo React Native.